element-ui--table之选择框改变选中状态或禁止选中

1.改变选中状态

官方文档：

表格默认选中：

<template>
	<el-table :data="tableData"  ref="multipleTable" @row-click="handleCurrentChange">
	</el-table>
</template>

<script>
export default {
data(){
	return{
		tableData:[
		{
			id:1,
			name:"111",
            isSelected:true
		},
        {
			id:2,
			name:"222",
            isSelected:false
		},
        ]
	}
},   
mounted() {
 this.tableData.forEach(item => {
   if(item.isSelected){
      this.$refs.multipleTable.toggleRowSelection(item,true);
   }
 });
}
}
</script>

注意：当数据是从后端获取的时候，这样写不能默认选中，此时应写成：

this.$nextTick(function(){
      this.$refs.multipleTable.toggleRowSelection(item,true);
}

2.禁止选中

给选择框那一行加监听事件:selectable="方法"

 <div>
    <el-table
    :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      :selectable="checkSelectable"
      width="50">
    </el-table-column>
    <el-table-column
      inline-template
      label="年"
      width="120">
      <div>{{ row.date }}</div>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="isModify"
      label="是否可以修改"
      show-tooltip-when-overflow>
    </el-table-column>
  </el-table>
  {{ multipleSelection }}
  </div>

export default{
  data() {
    return {
      tableData: [{
          date: '2018',
          name: '小海',
          isModify: '是'
        }, {
          date: '2016',
          name: '小北',
          isModify: '是'
        }, {
          date: '2012',
          name: '小张',
          isModify: '否'
        }, {
          date: '2011',
          name: '小胡',
          isModify: '否'
        }],
        multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //禁止选中的条件
    checkSelectable(row) {
      return row.isModify=='是'
    }
}