首页 > 其他 > 详细

element ui --table 点击每行实现选中效果、多选、全选。

时间:2021-02-18 15:08:24      阅读:63      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!