Board logo

标题: 表格多选并根据每行值初始化选中状态(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