element ui table设置默认选中及禁用实现教程

在用element ui开发时，经常用到table表格组件，element ui table表格里可以设置多选，那如何设置默认某一行是选种状态，或者设置某一行是禁用点击呢。

请看elementui文档： https://www.uihtm.com/element/#/zh-CN/component/table

实现的原理：

• 在数据接口返回时，设置是否禁用状态。

• 查看文档，利用toggleRowSelection方法设置某行数据为选中状态。注意设置要放在this.$nextTick(function() {...})时执行。

• 利用列事件:selectable="selectable"，控制禁用，
  

看下面代码

<el-table
    ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="selectable" width="55"></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>


var app = new Vue({
    el: '#app',
    data: {
      tableData: []
    },
    methods: {
        //控制是否禁用
        selectable(row, index)
        {
            if(row.disable)
            return false
            else
            return true
        },
        getData () {
            //此方法就用来模拟axios
            let that = this;
            axios.post('/user', {
                firstName: 'Fred',
                lastName: 'Flintstone'
              }).then(function (response) {
                    that.tableData = response.data.table;
                    that.$nextTick(function() {
                        that.toggle(that.tableData);   //建议包装成方法这样扩展性更强
                    })
              }).catch(function (error) {
                console.log(error);
              });
        },
        toggle (arr) {
            //逻辑代码
            arr.forEach(item => {
                if(...) {
                    this.$refs.multipleTable.toggleRowSelection(item,true);
                }
            });
        }
    }
})