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

转载自：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>

vue elmenetui admin表格筛选列（动态显示）相关推荐

layui表格筛选列不随页面刷新重置
Layui table 自带筛选列的功能,但是这个筛选列会随着页面的刷新重置.用户第二次进入页面或者进行table手工渲染,都会使得筛选项重置. 本例利用layui自带的本地储存进行筛选列的数据保存, ...
vue+elementUI 显示表格指定列合计数据
明确需求下图来自elementUI官网根据合计行数据的来源可以分为两种情况: 接口返回的数据只有表格中对应每个ID的数据,最后一行的合计是由前端来计算的表格中的合计行数据是从接口中返回的,不是由 ...
Vue+Element实现表格筛选
安装Vue和el什么的就不说了,也吐槽样式丑,作者懒得写样式主要是为了展示写法和功能虽然我自己都想吐槽 <template><div style="margin-top: ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介 1.表头吸顶效果 2.左侧列固定,右侧滑动,表头跟随内容滑动 3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去.最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事 ...
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...
layui分成两列相同的表格_干货！layui动态显示表格的列自己动手丰衣足食
众所周知啊,layui是可以手动筛选列的.但是这个筛选只限当前,你要是重新关闭当前页面或者登录进来,就又显示默认的列.可能有的人会说:那就直接给出别人想要的默认的列就行了嘛.但是众口难调啊.我就真的遇 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...

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

vue elmenetui admin表格筛选列（动态显示）相关推荐

最新文章

热门文章