vue+element-ui table实现表格列筛选

需求：表格数据根据筛选数据动态展示，可全选/取消全选或单独选择展示。如下图：代码地址：https://gitee.com/tudoumlp/just1.git文件目录下的(vue-ele-demo).如下：1，结构部分：<div style="text-align: right;margin-bottom: 0.5rem;"><el-pop

不灰不蓝亦不黛

4940人浏览 · 2021-04-23 15:23:47

不灰不蓝亦不黛 · 2021-04-23 15:23:47 发布

需求：
表格数据根据筛选数据动态展示，可全选/取消全选或单独选择展示。
如下图：在这里插入图片描述
代码地址：https://gitee.com/tudoumlp/just1.git 文件目录下的(vue-ele-demo).

如下：

1，结构部分：

<!-- 表格列筛选 -->
    <div style="text-align: right;margin-bottom: 0.5rem;">
      <el-popover placement="right" width="" trigger="click">
          <el-checkbox-group v-model="tableFilterData.checkBoxList">
            <template v-for="(item, i) in tableFilterData.dataNow2">
            <el-checkbox :label="item.attr" :key="i" checked style="display: block;margin:10px;" @change="filterFunHandle('filter',item.attr,i)">
              {{item.label}}
            </el-checkbox>
            </template>
          </el-checkbox-group>
          <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu" /> 列筛选</el-button>
          <el-button size="small" type="text" @click="filterFunHandle('allchecked')">全选</el-button>
          <el-button size="small" type="text" @click="filterFunHandle('cancel')">取消全选</el-button>
      </el-popover>
    </div>
    <!-- 筛选表格 -->
    <el-table size="small" border :data="tableFilterData.dataList" style="width: 100%;">
        <el-table-column type="selection" fixed="left" header-align="center" align="center" width="50"></el-table-column>
        <template v-for="(col,index) in tableFilterData.dataNow">
          <el-table-column :key="index" align="center" :prop="col.attr" :label="col.label" min-width="180">
          </el-table-column>
        </template>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="" min-width="170">
          <template slot-scope="scope">
            <el-button type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

2，数据部分：数据都是模拟数据
dataList是表格数据，dataNow和dataNow2是需要进行筛选控制是否显示的数据，之所以是两个，是因为一个dataNow2需要保存默认的数据，dataNow是操作时候动态变化的数据，如[{label: “性别”, attr: “sex”},{label: “姓名”, attr: “name”}] 表示只显示姓名和性别这两个列。
checkLabels是表格所有的表头数据，checkBoxList是操作时候动态变化的表头标题数据，如[“name”, “sex”] 表示只显示姓名和性别这两列数据。

data () {
    return {
      // 表格列筛选数据
      tableFilterData:{
        dataList: [
          {name: "张三", sex: "男", age: "22", address: "天津", 'position': '人'},
          {name: "李四", sex: "保密", age: "45", address: "河北", 'position': '人'},
          {name: "王五", sex: "女", age: "26", address: "北京", 'position': '人'}
        ],
        dataNow2: [
          {label: "姓名", attr: "name"},
          {label: "性别", attr: "sex"},
          {label: "年龄", attr: "age"},
          {label: "角色", attr: "position"},
          {label: "地址", attr: "address"}
        ],
        dataNow: [
          {label: "姓名", attr: "name"},
          {label: "性别", attr: "sex"},
          {label: "年龄", attr: "age"},
          {label: "角色", attr: "position"},
          {label: "地址", attr: "address"}
        ],
        checkLabels: [], // 筛选列显示多选框数据
        checkBoxList: [] // 筛选列数据
      }
    }
  }

3，方法部分：全选，取消全选，单独选择都在此方法。

// 列筛选
    filterFunHandle (type, currentItem, index) {
      if (type === 'filter') { // 筛选列
        if (event.target.checked === false) {
          let addItem = this.tableFilterData.dataNow.filter((item, index, arr) => {
            return currentItem !== item.attr
          })
          this.tableFilterData.dataNow = addItem
        } else {
          let checkData = this.tableFilterData.dataNow2.filter((item, index, arr) => {
            return currentItem === item.attr
          })
          checkData.map((item, index, arr) => {
            this.tableFilterData.dataNow.unshift(item)
          })
        }
      } else if (type === 'allchecked') { // 全选
        if (this.tableFilterData.checkLabels.length === 0) {
          this.tableFilterData.dataNow2.forEach((result) => {
            this.tableFilterData.checkLabels.push(result.attr)
          })
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
          this.tableFilterData.dataNow = this.tableFilterData.dataNow2
        } else {
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
          this.tableFilterData.dataNow = this.tableFilterData.dataNow2
        }
      } else if (type === 'cancel') { // 取消全选
        this.tableFilterData.checkBoxList = [] // 复选框置为空，全部不选择
        this.tableFilterData.dataNow = []
      }
    }

4，完整vue文件：

<template>
  <div class="table">
    <el-divider content-position="left">表格筛选</el-divider>
    <!-- 表格列筛选 -->
    <div style="text-align: right;margin-bottom: 0.5rem;">
      <el-popover placement="right" width="" trigger="click">
          <el-checkbox-group v-model="tableFilterData.checkBoxList">
            <template v-for="(item, i) in tableFilterData.dataNow2">
            <el-checkbox :label="item.attr" :key="i" checked style="display: block;margin:10px;" @change="filterFunHandle('filter',item.attr,i)">
              {{item.label}}
            </el-checkbox>
            </template>
          </el-checkbox-group>
          <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu" /> 列筛选</el-button>
          <el-button size="small" type="text" @click="filterFunHandle('allchecked')">全选</el-button>
          <el-button size="small" type="text" @click="filterFunHandle('cancel')">取消全选</el-button>
      </el-popover>
    </div>
    <!-- 筛选表格 -->
    <el-table size="small" border :data="tableFilterData.dataList" style="width: 100%;">
        <el-table-column type="selection" fixed="left" header-align="center" align="center" width="50"></el-table-column>
        <template v-for="(col,index) in tableFilterData.dataNow">
          <el-table-column :key="index" align="center" :prop="col.attr" :label="col.label" min-width="180">
          </el-table-column>
        </template>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="" min-width="170">
          <template slot-scope="scope">
            <el-button type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表格列筛选数据
      tableFilterData:{
        dataList: [
          {name: "张三", sex: "男", age: "22", address: "天津", 'position': '人'},
          {name: "李四", sex: "保密", age: "45", address: "河北", 'position': '人'},
          {name: "王五", sex: "女", age: "26", address: "北京", 'position': '人'}
        ],
        dataNow2: [
          {label: "姓名", attr: "name"},
          {label: "性别", attr: "sex"},
          {label: "年龄", attr: "age"},
          {label: "角色", attr: "position"},
          {label: "地址", attr: "address"}
        ],
        dataNow: [
          {label: "姓名", attr: "name"},
          {label: "性别", attr: "sex"},
          {label: "年龄", attr: "age"},
          {label: "角色", attr: "position"},
          {label: "地址", attr: "address"}
        ],
        checkLabels: [], // 筛选列显示多选框数据
        checkBoxList: [] // 筛选列数据
      }
    }
  },
  methods: {
    // 列筛选
    filterFunHandle (type, currentItem, index) {
      if (type === 'filter') { // 筛选列
        if (event.target.checked === false) {
          let addItem = this.tableFilterData.dataNow.filter((item, index, arr) => {
            return currentItem !== item.attr
          })
          this.tableFilterData.dataNow = addItem
        } else {
          let checkData = this.tableFilterData.dataNow2.filter((item, index, arr) => {
            return currentItem === item.attr
          })
          checkData.map((item, index, arr) => {
            this.tableFilterData.dataNow.unshift(item)
          })
        }
      } else if (type === 'allchecked') { // 全选
        if (this.tableFilterData.checkLabels.length === 0) {
          this.tableFilterData.dataNow2.forEach((result) => {
            this.tableFilterData.checkLabels.push(result.attr)
          })
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
          this.tableFilterData.dataNow = this.tableFilterData.dataNow2
        } else {
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
          this.tableFilterData.dataNow = this.tableFilterData.dataNow2
        }
      } else if (type === 'cancel') { // 取消全选
        this.tableFilterData.checkBoxList = [] // 复选框置为空，全部不选择
        this.tableFilterData.dataNow = []
      }
    }
  }
}
</script>

仅做一丢丢分享和记录，若有错误也烦请大佬指正，谢谢哇哇哇~~

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^