Element-ui el-table组件选中回显

最新推荐文章于 2024-08-15 17:26:28 发布

Ja_dream

最新推荐文章于 2024-08-15 17:26:28 发布

阅读量3k

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/ja_dream/article/details/133723484

版权

本文介绍了如何在使用Element-ui的table组件时处理组件回显需求，包括如何实现切换行选中状态、回显已选数据以及解决toggleRowSelection被动触发selection-change事件的问题。

摘要由CSDN通过智能技术生成

开发中使用Element-ui 的table组件进行开发，遇到了组件回显的需求，简要记录一下

Demo

直接上代码

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    :row-key="(row) => row.id"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
    <el-table-column prop="id" label="id" width="120"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="selectData()">回显选中的数据</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: Array.from({ length: 16 }).map((item, index) => {
        return {
          id: index,
          name: '王小虎' + index,
          address: '上海市普陀区金沙江路' + index
        }
      }),
      multipleSelection: Array.from({ length: 3 }).map((item, index) => {
        return {
          id: index + 3,
          name: '王小虎' + index + 3,
          address: '上海市普陀区金沙江路' + index + 3
        }
      }),
      rowSelectFlag: false // 禁止toggleRowSelection默认触发  @selection-change
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          // 切换选中状态
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        // 清空选中
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 回显选中的数据
    selectData() {
      this.$nextTick(() => {
        this.rowSelectFlag = true
        const idList = this.multipleSelection.map((e) => e.id)
        this.tableData.forEach((row) => {
          if (idList.includes(row.id)) {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
        this.rowSelectFlag = false
      })
    },
    handleSelectionChange(val) {
      if (this.rowSelectFlag) return
      this.multipleSelection = val
    }
  }
}
</script>

实现的关键点

组件API重点

Table Attributes

参数	说明	类型	可选值	默认值
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。	Function(row)/String	—	—

Table-column Attributes

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮	string	selection/index/expand	—
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）	Boolean	—	false

Table Methods

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择	—
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleAllSelection	用于多选表格，切换所有行的选中状态	-

回显细节

从tableData的数据里找对应的进行回显

组件存储选中的值和需回显的数据结构会有些许不一样（具体为什么，求大佬指教），导致toggleRowSelection不生效，故此从data里取值去做回显

const idList = this.multipleSelection.map((e) => e.id)
<!-- 从Data的数据里找对应的进行回显 -->
this.tableData.forEach((row) => {
	if (idList.includes(row.id)) {
   	this.$refs.multipleTable.toggleRowSelection(row, true)
  }
})