el-table封装点击列筛选行数据功能，支持筛选，搜索，排序功能
数据少的话，可以前端实现，如果多的话，建议还是请求接口比较合理
父组件：
<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App" /> -->
<el-button @click="calculateSum">求和</el-button>
<el-input v-model="searchValue"></el-input>
<el-table :data="tableData" height="250" border style="width: 100%;position: relative;" id="table1">
<el-table-column prop="date" label="日期" width="180">
<template v-slot:header>
<i class="el-icon-search" style="margin-right: 15px;" @click.stop="filterData($event, 'date')"></i>
<span class="table-heard-filter" style="color: red; font-weight: bold;">0</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template v-slot:header>
<el-checkbox v-model="checked2" @change="changeFnc('name')"></el-checkbox>
<i class="el-icon-search" style="margin-right: 15px;" @click.stop="filterData($event, 'name')"></i>
<span class="table-heard-filter">1</span>
</template>
</el-table-column>
</el-table>
<TableTool v-if="showFilterTool" ref="selectTool" :filterToolLeft="filterToolLeft" :filterToolTop="filterToolTop"
@closeTool="closeTool" @saveSeach="saveSeach" :ids="ids" :type="type" />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import TableTool from '@/components/TableTool.vue'
import ColumnDialog from './ColumnDialog.vue'
import { Checkbox } from 'element-ui';
export default {
name: 'HomeView',
components: {
HelloWorld,
TableTool,
ColumnDialog
},
data() {
return {
checked: false,
checked2: false,
summaryShow: false,
summary: [], // 用于存放总计数据的数组
searchValue: "",
CheckboxArr: [],
ids: [], // 初始化ids为空数组
type: "",
currentSummaryColumn: null, // 当前点击的列名
tableData: [{
date: '2016-05-03',
name: 56,
address: 8,
id: "0"
}, {
date: '2016-05-02',
name: 78,
address: 8,
id: "1"
}, {
date: '2016-05-04',
name: 0,
address: 8,
id: "2"
}
],
showFilterTool: false,
CheckboxArr: [],
ids: [],
type: "",
currentSummaryColumn: null // 当前点击的列名
}
},
mounted() {
localStorage.setItem('CheckboxArr', JSON.stringify(this.tableData))
// this.scroll()
this.closeTableToolFnc()
},
beforeDestroy() {
// this.scroll()
this.closeTableToolFnc()
},
methods: {
//子组件只用@click.stop防止事件冒泡，父组件单击任意位置关闭子组件
closeTableToolFnc() {
document.addEventListener("click", (e) => {
// if (!this.$refs.selectTool.contains(e.target)) {
this.closeTool()
// }
});
},
filterData(e, type) {
console.log(type);
this.type = type
this.showFilterTool = false;
this.$nextTick(() => {
this.filterToolTop = e.pageY;
this.filterToolLeft = e.pageX;
this.ids = []
this.tableData.forEach(t => {
this.ids.push(t.id)
})
this.showFilterTool = true;
});
},
closeTool() {
this.showFilterTool = false;
},
saveSeach(data) {
this.tableData = []
this.tableData = data
this.closeTool();
},
}
}
</script>
<style>
.Tableone ::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
display: none
}
</style>
子组件：
<template>
<div class="tableTool" :style="{ top: filterToolTop + 30 + 'px', left: filterToolLeft - 20 + 'px' }" @click.stop>
<el-button @click="shengFnc">升序</el-button>
<el-button @click="jiangFnc">降序</el-button>
<el-input v-model="keyword" prefix-icon="el-input__icon el-icon-search" type="text" placeholder="搜索"
@blur="blurFnc"></el-input>
<div class="select-box">
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="checkedList">
<el-checkbox v-for="(item, index) in CheckboxArr" :label="item.id" :key="index" :value="item.id">
<span>{{ item[type] }}</span>
</el-checkbox>
</el-checkbox-group>
</div>
<div class="bottom">
<el-button size="mini" @click="$emit('closeTool')">取消</el-button>
<el-button type="primary" size="mini" @click="save">确认</el-button>
</div>
<i class="el-icon-caret-top"></i>
</div>
</template>
<script>
export default {
name: "tableCol",
props: {
filterToolLeft: {
required: true,
type: Number
},
filterToolTop: {
required: true,
type: Number
},
ids: {
type: Array
},
type: {
type: String
}
},
data() {
return {
keyword: "",
checkAll: false,
checkedList: [],
options: [],
isIndeterminate: true,
allOptions: [],
CheckboxArr: JSON.parse(localStorage.getItem('CheckboxArr')),
c: []
};
},
mounted() {
},
methods: {
shengFnc() {
this.CheckboxArr.sort((a, b) => a.id - b.id);
},
jiangFnc() {
this.CheckboxArr.sort((a, b) => b.id - a.id);
},
blurFnc() {
console.log(this.keyword);
if (this.keyword) {
this.CheckboxArr = this.CheckboxArr.filter(item => {
if (this.$props.type == 'date') {
return item.date == this.keyword;
} else {
return item.name == this.keyword;
}
});
} else {
this.CheckboxArr = JSON.parse(localStorage.getItem('CheckboxArr'))
}
},
handleCheckAllChange(val) {
console.log(val, this.checkedList);
this.checkedList = val ? this.CheckboxArr.map(item => item.id) : [];
},
save() {
this.c = []
this.CheckboxArr.forEach(r => {
this.checkedList.forEach(i => {
if (r.id == i) {
this.c.push(r)
}
})
})
this.$emit("saveSeach", this.c);
},
},
mounted() {
console.log(this.CheckboxArr, "传入的数据");
this.checkedList = [...this.$props.ids]
if (this.CheckboxArr.length == this.checkedList.length) {
this.checkAll = true
} else {
this.checkAll = false
}
},
};
</script>
<style scoped>
.tableTool {
position: fixed;
background: #fff;
box-shadow: 0 0 5px #ccc;
padding: 10px;
z-index: 999;
}
/deep/.el-input__inner {
padding-left: 30px;
}
.select-box {
border: #ccc solid 1px;
padding: 10px;
margin-top: 10px;
max-height: 280px;
overflow: auto;
max-width: 400px;
}
/deep/ .el-checkbox {
display: block;
margin-top: 5px;
}
/deep/ .el-radio-group {
display: flex;
flex-direction: column;
}
.bottom {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.el-icon-caret-top {
position: absolute;
color: #fff;
top: -13px;
font-size: 20px;
}
.el-checkbox:last-of-type {
margin-right: none;
}
</style>