elementui表格默认选中

最新推荐文章于 2024-09-20 09:53:20 发布

益达木咸醇

最新推荐文章于 2024-09-20 09:53:20 发布

阅读量2.2k

点赞数

分类专栏：前端方法调用文章标签： elementui vue

本文链接：https://blog.csdn.net/weixin_45766506/article/details/119841303

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

方法调用

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在ElementUI的Table组件中实现数据加载后的默认选中效果。关键在于使用$nextTick确保数据渲染完成后执行默认选中操作，并通过forEach循环及toggleRowSelection方法实现。示例代码展示了如何在axios模拟的接口数据加载后设置默认选中项。

摘要由CSDN通过智能技术生成

重点：

一般地，我们是用接口返回的数据去渲染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);
						}
					});
				}
            }
        })