2021-06-06

element-ui多选表格默认选中和禁选如何设置

在我们开发中用到element-ui的多选表格的时候，有时候根据业务的需求需要默认某些选项自动勾选，或者设置为禁用状态，下面和大家分享一下如何实现。
下面写了一个demo，引用了一组表格，在页面加载时候模拟接口获取表格绑定数据，下面见代码

<template>
 <div class="about">
   <div class="box">我是element-table组件</div>
   <el-table
     ref="multipleTable"
     :data="tableData"
     tooltip-effect="dark"
     style="width: 100%"
     @selection-change="handleSelectionChange"
   >
   <!-- 绑定:selectable="selectInit"来设置数据行是否为禁选状态 -->
     <el-table-column type="selection" width="55" :selectable="selectInit">
     </el-table-column>
     <el-table-column label="日期" width="120">
       <template slot-scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
     <el-table-column prop="address" label="地址" show-overflow-tooltip>
     </el-table-column>
   </el-table>
 </div>
</template>
<script>
import Mock from "@/mock";
import axios from "axios";
export default {
 name: "elementTable",
 data() {
   return {
     tableData: [],//表格绑定数组
     selectTable: ["1", "2"],//需要设置为禁用状态的数据的id值数组集合
   };
 },

 created() {
   this.getTableData();//用mock模拟接口返回表格数据
 },
 methods: {
   handleSelectionChange() {},
   selectInit(row) {
     //根据id判断该行是否要设置为禁选，返回false即为该行禁选
     if (row.id) {
       return false;
     } else {
       return true;
     }
     // return false
   },
   getTableData() {
     axios.get("/getTableData").then((res) => {
       console.log(res);
       this.tableData = res.data;
       this.$nextTick(() => {
         //获取数据后调用表格的toggleRowSelection方法将筛选出来的数据行设置为选中状态
         this.tableData.forEach((row) => {
           if (this.selectTable.indexOf(row.id) >= 0) {
             this.$refs.multipleTable.toggleRowSelection(row, true);
           }
         });
       });
     });
   },
 },
};
</script>
<style lang="less" scoped>
.about {
 width: 100%;
 background-color: orange;
 height: 200px;
}
</style>

代码注释已详细解释了代码的含义，就不在赘述，下面看一下mock模拟的数据

const tableData = [
    {
    'id': '1',
    'name': '李四',
    'age|1-10': 1,
    'address': '北京',
    'date':'2021-5-30'
},
    {
    'id': '2',
    'name': '王五',
    'age|1-10': 1,
    'address': '郑州',
    'date':'2021-5-31'
},
    {
    'id': '3',
    'name': '张三',
    'age|1-10': 1,
    'address': '许昌',
    'date':'2021-6-30'
},
    {
    'id': '',
    'name': '牛六',
    'age|1-10': 1,
    'address': '天津',
    'date':'2021-7-30'
},
    {
    'id': '',
    'name': '蔡文姬',
    'age|1-10': 1,
    'address': '上海',
    'date':'2021-8-30'
},
]

下面是表格的状态

可以看到前三个数据行存在id默认为禁用状态，前两个数据行默认为选中状态