使用elementUI的table组件无法实现多选框默认选中的解决办法

zmisgod 发布于 2019-2-20 20:44:59 阅读 128 评论 0

我的需求是在table显示的时候默认会勾选table表的。但是现在我使用官方提供的方法this.$refs.multipleTable.toggleRowSelection(row);无法默认勾选。这个是element官网文档地址:demo地址

我的代码与这个代码的区别就是我的表单的data是通过axios获取的,此时我将data的值写死,然后在mounted中执行this.$refs.multipleTable.toggleRowSelection(row);,此时是可以的,于是我想到,可能是因为axios是通过回调的,及时axios成功后,table的dom还是没有更新,需要等到table的dom更新后,才可以执行this.$refs.multipleTable.toggleRowSelection(row);默认挂载方法。

于是我在axios的then方法中最后添加了

this.$nextTick(function() {
    this.$refs.multipleTable.toggleRowSelection(row);
}

此时就可以。

下面我把完整的代码贴出来给大家

<template>
    <div class="content">
      <el-table
        ref="multipleTable"
        :data="list"
        style="width: 1200px"
        @select="handleSelectionChange"
      >
        <el-table-column v-if="showSection" type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="文章ID" width="100"></el-table-column>
      </el-table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  mounted() {
    this.getList()
  },
  methods: {
    checked() {
        this.$refs.multipleTable.toggleRowSelection(this.list[j], true)
    },
    getList() {
      axios.get('url').then(data => {
          let list = data.data
          this.list = list.list
          this.$nextTick(function() {
            this.checked()
          })
        }).catch(err => {})
    }
  }
}
</script>