重点:

一般地,我们是用接口返回的数据去渲染elementui的Table表格,而这里如果要实现默认选中的效果,就必须要有一下的条件:

1、一定要接口返回数据之后才进行默认选中的操作,即用
this.$nextTick(function() {...}),在里面进行默认选中的操作;

2、一定要用el-table标签里面的data属性的那个数组去用forEach循环体(试过用for循环不行)中用
this.$refs.****.toggleRowSelection(row,true);实现默认选中

不多说,现在模拟一下场景:

<el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        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: {
 				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);
						}
					});
				}
            }
        })
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐