vue elmenetui admin表格筛选列（动态显示）

最新推荐文章于 2024-08-20 09:45:52 发布

宇宙☆空间站

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量747

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript ui

原文链接：https://blog.csdn.net/weixin_44835598/article/details/116056565

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

转载自：https://blog.csdn.net/weixin_44835598/article/details/116056565

<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>
            <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: [] // 筛选列数据
      }
    }
  },
  watch: {
    'tableFilterData.checkBoxList'(val) {
      console.log(val)
      this.tableFilterData.dataNow = this.tableFilterData.dataNow2.filter(item => val.includes(item.attr))
    }
  },
  methods: {
    // 列筛选
    filterFunHandle(type, currentItem, index) {
      if (type === 'allchecked') { // 全选
        var tmp = []
        this.tableFilterData.dataNow2.filter(item => {
          tmp.push(item.attr)
        })
        this.tableFilterData.checkBoxList = tmp
      } else if (type === 'cancel') { // 取消全选
        this.tableFilterData.checkBoxList = [] // 复选框置为空，全部不选择
      }
    }
  }
}
</script>