Vue2: 创建一个可多选的Table，并回显数据选中状态

我是飞鸟呀

于 2024-12-31 17:25:27 发布

阅读量490

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/l_q_l/article/details/144853755

Vue 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

如图，需要创建一个含有checkBox的允许多选的表格，并在表格初始化的时候，根据初始状态回显数据的选中状态，即设置哪条数据是选中的，哪条是未被选中的。

1、创建table

手动添加一个el-table-column，设type属性为selection即可：

<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>

2、初始化时回显人员选中状态

getUserListByRole(paramsOptions).then(response => {
   this.userList = response.data;
   this.loading = false;
   t

了解本专栏