默认勾选一行 form -item

原创于 2020-07-23 16:35:25 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js

在Vue.js应用中遇到默认勾选FormItem时可能会遇到失效问题。为确保数据加载完成后才执行勾选操作，可以使用`this.$nextTick`确保DOM更新后再进行设置，默认选一行或全选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认勾选失效问题
注意要当数据都加载完的时候再去勾选使用this.$nextTick即可

 <el-table ref="multipleTable" :data="tableData" style="width: 100%" selection-change="tableSelectChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="名称"
            width="120">
            <template slot-scope="scope">{{ scope.row.detailName }}</template>
        </el-table-column>
        <el-table-column
            label="单价(元)"
            width="120">
            <template slot-scope="scope">{{ scope.row.money }}</template>
        </el-table-column>
    </el-table>

默认选一行

this.$nextTick(function () {
  this.$refs.multipleTable.toggleRowSelection(this.tableData[this.tableData.length-1],true);
   });
});

默认全选

 this.$nextTick(function () {
      this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row,true);
      });
  });