Element table使用技巧详解

一、控制table某些行数不显示

　　下载附件的需求，有些行有附件，有些没有，因此须要过滤，重点是：Array.filter()使用

<el-card :body-style="{ padding: '20px 10px' }"> <h5>附件列表</h5> <el-table :data="quesObj.filter(item => item.attach)"> <el-table-column label="附件名称" align="center"> <template slot-scope="scope"> <a :download="scope.row.attach" :href="'/api/hbase/readFile?fileName=' + scope.row.attach">{{scope.row.attach}}</a> </template> </el-table-column> </el-table> </el-card>

二、elementUI的table自定义合计方法

//一、table上添加summary-method自定义计算方法 <el-table class="orderStyle" :show-summary = "userInfo && userInfo.roleName === 'user'" :summary-method="totalRule" ref="order" :data="orderData" @selection-change="handleSelectionChange"> //二、选择的行数据 handleSelectionChange(rows){ this.orders = rows }, //三、合计规则：注意return的是与列对应的数组 totalRule(){ let sum = 0 this.orders.forEach(item => { sum += item.price }) return ['合计','','','',sum,''] },

三、elementUi的tabel组件若是要显示合计的话，下面的prop是必须得加的

<el-table-column label="服务价格" prop="service_price"> <template slot-scope="scope">{{scope.row.service_price}}</template> </el-table-column>

四、elementUi的tabel组件复选框控制禁止选择

<el-table-column type="selection" width="55" :selectable='checkboxInit'> </el-table-column> //methods里 checkboxInit(row,index){ 　　if (row.withdrawState==2)//这个判断根据你的状况而定 　　　　return 0;//不可勾选，或者是return false/true 　　else 　　　　return 1;//可勾选 }

五、table展开功能

<h5>远程工具列表：</h5> <el-table ref="assistanceTool" :data="toolsOpt" row-key="name" :expand-row-keys="expands"> <el-table-column type="expand"> <template slot-scope="props"> <div class="instructions">{{ props.row.instructions }}</div> </template> </el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="copyright" label="版权" width="150"></el-table-column> <el-table-column prop="version" label="版本" width="60"></el-table-column> <el-table-column prop="downurl" label="下载连接"></el-table-column> <el-table-column label="介绍" width="60"> <template slot-scope="scope"> <el-button @click="view(scope.row)" type="text" size="small">查看</el-button> </template> </el-table-column> </el-table> //一、首先须要：row-key="name" :expand-row-keys="expands" //二、点击查看的方法：若是expands没有就把name push进去，下面这种是一次只能展开一个，点击别的，关闭以前的 view(row){ if (this.expands.indexOf(row.name) < 0) { this.expands = [] this.expands.push(row.name); } else { this.expands = [] } },

六、表格筛选功能

//一、首先须要加上下面这些，prop是必须加的，不然不生效 <el-table-column prop="category" label="类目" :filters="categoryFilter" :filter-method="filterType" filter-placement="bottom-end"> </el-table-column> //二、定义categoryFilter数组存filter字段，而后在获取数据的时候去遍历赋值 fetchData(){ getScriptListApi().then(res => { if(res.status === 200){ this.scriptData = res.data res.data.forEach(item => { this.initFilter(this.typeFilter,item.type) this.initFilter(this.categoryFilter,item.category) }) } }) }, //三、加上下面2个公共方法便可 initFilter(array,item){ let _obj = { text:item, value:item } if(JSON.stringify(array).indexOf(JSON.stringify(_obj)) === -1){ array.push(_obj) } }, filterType(value,row,column){ const property = column['property']; return row[property] === value; },

　　另外还有一个  filter-change  方法（用@filter-change绑定），要在table根节点上设，而不是el-table-column节点的方法，那是个全局的方法，只要你的表头有filter变化了，就会触发