el-table表头添加筛选功能
效果图:
思路:使用vue的render函数自定义渲染
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
<!-- 字体 -->
<link rel="stylesheet" href="https://unpkg.com/browse/element-ui@2.14.1/lib/theme-chalk/fonts/element-icons.ttf">
<link rel="stylesheet"
href="https://https://unpkg.com/browse/element-ui@2.14.1/lib/theme-chalk/fonts/element-icons.woff">
<style>
/* 自定义样式部分 */
.el-table th,
.el-table tr {
background: #1D2643;
color: #ccc
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background: #343C56;
}
.el-table td,
.el-table th.is-leaf {
border-color: transparent
}
</style>
</head>
<body>
<div id="example">
<el-table :data="testData" style="width:40%;margin:0 auto">
<el-table-column prop="name" label="源文件"></el-table-column>
<el-table-column prop="status" :render-header="renderHeader"></el-table-column>
</el-table>
</div>
<!-- 引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
const tempObj = {
options: [{
label: '所有状态',
value: '2'
}, {
label: '未完成',
value: '0'
}, {
label: '已完成',
value: '1'
}],
colorMap: ['#dd4b39', '#00ff00', '#00a1d6'],
dataMap: ['未完成', '已完成', '所有状态']
}
const app = new Vue({
el: "#example",
data() {
return {
value: '2',
label: '所有状态',
/**这里可以改成其他数据
*
* 比如,从ajax取到的数据
* **/
// testData:[],
testData: [{
id: 1,
name: '1.txt',
status: '已完成'
}, {
id: 2,
name: '2.txt',
status: '未完成'
}]
}
},
// mounted() {
// this.timer()
// },
methods: {
// timer() {
// let This = this
// $.ajax({
// type: 'GET',
// url: 'xxxxx',
// success(data) {
// let json = data
// This.testData = json.data
// console.log(json)
// }
// })
// },
renderHeader(h, column) {
let This = this
let arr = []
tempObj.options.map((i) => {
arr.push(h('el-option', {
domProps: {
value: i.value
},
nativeOn: {
click: This.handleState
},
style: {
color: tempObj.colorMap[i.value]
}
}, i.label))
})
return h('div', [
h('el-select', {
attrs: {
value: This.label,
}
}, arr)
])
},
handleState(event) {
this.value = event.target.value
this.label = tempObj.dataMap[this.value]
alert("切换至" + this.label)
}
}
})
</script>
</body>
</html>