Vue使用ElementUI框架，点击对应复选框，el-table表格呈现对应数据（前端处理）

2024-02-20 15:27:20

前言

在项目开发中，我们经常会遇到这样的需求：在一个页面上，有多个复选框，每个复选框对应一个表格，当点击某个复选框时，表格中会呈现出与该复选框相关的数据。

实现原理

1. 初始化

首先，我们需要初始化复选框和表格。复选框可以使用ElementUI的el-checkbox组件，表格可以使用ElementUI的el-table组件。

<el-checkbox-group v-model="checkedKeys">
  <el-checkbox label="选项1" name="选项1"></el-checkbox>
  <el-checkbox label="选项2" name="选项2"></el-checkbox>
  <el-checkbox label="选项3" name="选项3"></el-checkbox>
</el-checkbox-group>

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

2. 监听事件

接下来，我们需要监听复选框的点击事件。当用户点击某个复选框时，我们就可以根据复选框的name属性来获取对应的数据。

methods: {
  handleCheckboxChange(val) {
    this.tableData = this.filterData(val);
  }
}

3. 数据过滤

获取到数据后，我们需要对数据进行过滤。我们可以使用Array.filter()方法来过滤出与复选框name属性相匹配的数据。

filterData(val) {
  return this.data.filter(item => item.name === val);
}

4. 数据呈现

最后，我们将过滤后的数据呈现到表格中。

data() {
  return {
    data: [
      { name: '张三', age: 20, address: '北京' },
      { name: '李四', age: 25, address: '上海' },
      { name: '王五', age: 30, address: '广州' }
    ],
    tableData: [],
    checkedKeys: []
  }
}

性能优化

为了提高页面的性能，我们可以对数据进行预处理。我们可以将数据按照复选框的name属性进行分组，然后在用户点击复选框时直接从分组中获取数据，这样可以避免对数据进行多次过滤。

data() {
  return {
    data: {
      '选项1': [
        { name: '张三', age: 20, address: '北京' }
      ],
      '选项2': [
        { name: '李四', age: 25, address: '上海' }
      ],
      '选项3': [
        { name: '王五', age: 30, address: '广州' }
      ]
    },
    tableData: [],
    checkedKeys: []
  }
}

methods: {
  handleCheckboxChange(val) {
    this.tableData = this.data[val];
  }
}