el-table表头添加筛选功能
- 思路：使用vue的render函数自定义渲染
效果图：
文章图片
文章图片
思路：使用vue的render函数自定义渲染 【vue|el-table表头如何添加筛选功能】上代码：
Document - 锐客网
>
/* 自定义样式部分 */
.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
}
="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">="https://unpkg.com/element-ui/lib/index.js">
>
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 = https://www.it610.com/article/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 = https://www.it610.com/article/event.target.value
this.label = tempObj.dataMap[this.value]
alert("切换至" + this.label)
}
}
})
推荐阅读
- 工具|pnpm安装以及使用
- 从0到1，基于微信小程序的婚纱影楼小程序开发
- JSP|【三剑客+JSP+Mysql+Tomcat】从前到后搭建简易编程导航小网站（期末作业）
- HTML+CSS|【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
- 前端|【HTML+CSS+JS】注册页面模板
- webpack|【webpack】从零开始配置webpack系列(原理篇)
- 计算机网络|【HTTP协议】发展历程
- webpack|【webpack】从零开始配置webpack系列(基础篇)
- webpack|【webpack】从零开始配置webpack系列(进阶篇)