【强推】在Vue的El-Table中实现多选与反选功能

2023-02-14 06:55:19

实现 Vue.js 中 El-Table 的多选和反选功能

在 Vue.js 中使用 El-Table 时，多选和反选功能可以极大地简化表格数据管理。本文将逐步指导你如何在 El-Table 中实现这些功能。

步骤：

1. 安装 Element UI

npm install element-ui

2. 导入 Element UI

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

3. 使用 El-Table

<el-table :data="tableData">
  <el-table-column type="selection" width="55">
  </el-table-column>
  <el-table-column prop="name" label="Name">
  </el-table-column>
  <el-table-column prop="age" label="Age">
  </el-table-column>
</el-table>

4. 实现全选功能

<el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>

handleSelectAll(value) {
  this.tableData.forEach(item => item.selected = value)
}

5. 实现反选功能

<el-table :data="tableData" @selection-change="handleSelectionChange">
</el-table>

handleSelectionChange(val) {
  this.selectAll = val.length === this.tableData.length
}

代码示例：

<template>
  <div>
    <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="Name">
      </el-table-column>
      <el-table-column prop="age" label="Age">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Jack', age: 40 },
        { name: 'Jill', age: 35 }
      ],
      selectAll: false
    }
  },
  methods: {
    handleSelectAll(value) {
      this.tableData.forEach(item => item.selected = value)
    },
    handleSelectionChange(val) {
      this.selectAll = val.length === this.tableData.length
    }
  }
}
</script>