vue+elmentUi实现table列筛选动态展示功能
table列筛动态选展示功能的实现前言: 用过elementUi的小伙伴都知道,用它配合vue来写前端页面是很爽的,在大多数情况下,直接拿过来使用就能满足产品需求。就拿table组件来说,从简单的表格展示到到复杂自定义,开发者把很多可能涉及到的场景都考虑了进来。但是细心的你可能会发现,在使用table组件的时候,行是动态加载的,很多的操作都是对行进行的,而列是在一开始使用的时候要展示哪些列就写死了
·
table列筛动态选展示功能的实现
前言: 用过elementUi的小伙伴都知道,用它配合vue来写前端页面是很爽的,在大多数情况下,直接拿过来使用就能满足产品需求。就拿table组件来说,从简单的表格展示到到复杂自定义,开发者把很多可能涉及到的场景都考虑了进来。但是细心的你可能会发现,在使用table组件的时候,行是动态加载的,很多的操作都是对行进行的,而列是在一开始使用的时候要展示哪些列就写死了,如果展示的列很多,就算使用了固定列啥的冻结,用户在操作的时候依然会有很多不便,那么能不能通过筛选操作动态的展示想要看到的列数据呢?comme on,我们一起来看看吧!
首先使用table组件正常展示表格数据,把本来要写死的列通过for循环展示:
<el-table :data="tableData" border style="position: relative;">
<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
<el-table-column v-for="(col,index) in colums" :key="index" align="center"
:prop="col" :label="col">
</el-table-column>
</el-table>
结果发现表格数据展示正常:
然后使用Popover弹出框实现点击弹出筛选项,进行筛选操作:
<template>
<div class="containClass">分类
<h3 class="title">列动态展示table案例</h3>
<el-popover
placement="bottom"
width="150"
trigger="click">
<el-checkbox-group v-model="checkList">
<el-checkbox :label="item" v-for="(item, i) in checkLabels" :key="i" style="display: block;"></el-checkbox>
</el-checkbox-group>
<span v-show="canDo" class="filterFuncClass" @click="handlerFilterFunc('filter')">筛选</span>
<span v-show="!canDo" class="disabledClass">筛选</span>
<span v-show="canDo" class="filterFuncClass" @click="handlerFilterFunc('cancel')">取消</span>
<span v-show="!canDo" class="disabledClass">取消</span>
<span></span>
<span class="filterClass" slot="reference">筛选
<i class="fa fa-filter"></i>
</span>
</el-popover>
<el-table :data="tableData" border style="position: relative;">
<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
<el-table-column v-for="(col,index) in colums" :key="index" align="center"
:prop="col"
:label="col"
>
</el-table-column>
</el-table>
</div>
</template>
点击筛选后,页面可进行条件选择,效果展示如下:
加入js操作代码,最中全部代码如下:
<template>
<div class="containClass">分类
<h3 class="title">列动态展示table案例</h3>
<el-popover
placement="bottom"
width="150"
trigger="click">
<el-checkbox-group v-model="checkList">
<el-checkbox :label="item" v-for="(item, i) in checkLabels" :key="i" style="display: block;"></el-checkbox>
</el-checkbox-group>
<span v-show="canDo" class="filterFuncClass" @click="handlerFilterFunc('filter')">筛选</span>
<span v-show="!canDo" class="disabledClass">筛选</span>
<span v-show="canDo" class="filterFuncClass" @click="handlerFilterFunc('cancel')">取消</span>
<span v-show="!canDo" class="disabledClass">取消</span>
<span></span>
<span class="filterClass" slot="reference">筛选
<i class="fa fa-filter"></i>
</span>
</el-popover>
<el-table :data="tableData" border style="position: relative;">
<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
<el-table-column v-for="(col,index) in colums" :key="index" align="center"
:prop="col"
:label="col"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Catelog',
data () {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
salary: 10000
},
{
date: '2016-05-04',
name: '张小龙',
address: '上海市普陀区金沙江路 1517 弄',
salary: 12000
},
{
date: '2016-05-01',
name: '赵小牛',
address: '上海市普陀区金沙江路 1519 弄',
salary: 9000
},
{
date: '2016-05-03',
name: '李小狗',
address: '上海市普陀区金沙江路 1516 弄',
salary: 20000
},
{
date: '2016-05-06',
name: '孙小猪',
address: '上海市普陀区金沙江路 1519 弄',
salary: 5500
}
],
colums: [],
checkLabels: [],
checkList: []
}
},
computed: {
canDo () {
return this.checkList.length > 0
}
},
methods: {
handlerFilterFunc (type) {
console.log(type)
if (type === 'filter') {
this.colums = this.checkList
} else if (type === 'cancel') {
this.checkList = []
this.colums = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])))
}
}
},
created () {
this.checkLabels = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])))
this.colums = JSON.parse(JSON.stringify(Object.keys(this.tableData[0])))
}
}
只要拿到后台返回的数据即可,最后功能效果如下:
小提示: 示例中的筛选按钮位置是随便放的,如果需求里面要求筛选功能放在某个列的名字旁边,只需要通过绝对定位放到需要的位置即可:
The End !
更多推荐
已为社区贡献5条内容
所有评论(0)