标题: 表格多选并根据每行值初始化选中状态（el-table-column type=“selection“） [打印本页]

---

作者: xiexie    时间: 2023-7-19 11:10     标题: 表格多选并根据每行值初始化选中状态（el-table-column type=“selection“）

第一步： 在 el-table 中加ref 属性，它在vue中相当于是id的存在。 ref=“multipleTable”,下面写 js 用的
<!--vue-->
<el-table
        :data="tableData"
        ref="multipleTable"
        v-loading="loading"
        @selection-change="selectionChange"
        style="width: 100%;margin-top:60px"
        :header-cell-style="{ background: '#F0F2F5', color: '#000000' }"
>
        <el-table-column type="selection" width="25px"></el-table-column>
        ………………
</el-table>

toggleRowSelection是官方方法：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；参数：row, selected
如下，先遍历每行数据对其该属性值做判断，然后更新选中状态
//可关联状态的商品默认全选
//created()
    this.$nextTick(() => {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData.isRerationItem.status == 1) {
          this.$refs.multipleTable.toggleRowSelection(this.tableData)
        }
      }
    })

//methods
//  勾选发生变化
    selectionChange(val) {
      console.log(val)
      this.multipleSelection = val
      this.selectionIds = this.multipleSelection.map(function(item) {
        return item['itemId']
      })
      console.log('选中的商品id数组：' + this.selectionIds)
    },

---

欢迎光临 PHP开发笔记 (http://phpvi.com/)

Powered by Discuz! 6.1.0