element ui table里 自带Checkbox组件,所以结合组件自身实现单击每行,实现这行的选中效果。代码如下:
<el-table border v-show="blurShow" :row-class-name="tableRowClassName" @row-click="getAddLisy" @selection-change="handleSelectionChange" ref="multipleTable" :data="searchData"> <el-table-column type="selection" width="55" :selectable="selectabele"> </el-table-column> <el-table-column align="center" prop="materialCode" label="物料编码"> <template slot-scope="scope"> <span v-if="scope.row.materialCode">{{scope.row.materialCode | sliceNumber}}</span> </template> </el-table-column> <el-table-column align="center" prop="materialDesc" label="物料描述"></el-table-column> </el-table>
方法:
// 点击每行添加数据 getAddLisy(row){ if(!row.disabled){ this.$refs.multipleTable.toggleRowSelection(row); }else{ console.log(‘已添加了该耗材‘) } }, // 全选 handleSelectionChange(val) { this.selectionChangeList = val; }, // 多选框根据条件禁止选择 selectabele(row){ if(row.isChecked){ this.$set(row,‘disabled‘,true); return false }else{ return true } },
selectionChangeList 为选中的数据组成的数组。
element ui --table 点击每行实现选中效果、多选、全选。
原文:https://www.cnblogs.com/zhu-xl/p/14411462.html