iview的table的表头加下拉搜索操作等功能
程序员文章站
2022-04-29 08:57:58
...
iview的table的表头加下拉搜索操作等功能
先上一张效果图：
代码部分：
<template>
<Table :columns="columns1" :data="data1"></Table>
</template>
export default {
data () {
return {
headerPersonVisible:false,
headerSearchVisible:false,
clickIsSearchBtn:false,
verticalSearch: '全部可检索',
columns1: [
{
title: 'Name',
key: 'name',
align: 'center',
renderHeader: (h, params) => {
return h('Dropdown',
{
props:
{
transfer: true,
trigger: 'custom',
visible: this.headerPersonVisible
}
},
[
h('a',
{
style: {
color: '#333'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerPersonVisible = !this.headerPersonVisible;
}
},
}, '名称'),
h('Icon', {
props: {
type: 'ios-funnel'
},
style: {
marginLeft: '5px',
fontSize: '14px',
color: '#c5c8ce',
cursor: 'pointer'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerPersonVisible = !this.headerPersonVisible;
}
}
}),
h('DropdownMenu', {slot: 'list'},
[
h('DropdownItem', {
class: 'myDropdown',
style: {
fontSize: '14px !important',
textAlign: 'left'
},
nativeOn: {
click: (name) => {
//console.log(name);
}
},
}, [
h('Input',
{
domProps:{
id:'personInput'
}
},
{
props: {
placeholder: "请输入内容",
},
on: {
'on-blur': (event) => {
//console.log(event);
}
},
}
),
h('div', {
style: {
textAlign: 'center',
marginTop: '10px'
}
},
[
h('Button', {
props: {
size: 'small'
},
style: {
fontSize: '14px',
marginTop: '10px',
marginRight: '10px'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerPersonVisible = false;
}
}
}, '筛选'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
fontSize: '14px',
marginTop: '10px'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerPersonVisible = false;
}
}
}, '重置')
])
])
]
)
])
}
},
{
title: 'isSearch',
key: 'isSearch',
align: 'center',
renderHeader: (h, params) => {
return h('Dropdown',
{
props:
{
transfer: true,
trigger: 'custom',
visible: this.headerSearchVisible
}
},
[
h('a',
{
style: {
color: '#333'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerSearchVisible = !this.headerSearchVisible;
this.clickIsSearchBtn = false;
}
},
}, '可检索'),
h('Icon', {
props: {
type: 'ios-arrow-down'
},
style: {
marginLeft: '5px',
fontSize: '14px',
color: '#333',
cursor: 'pointer'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerSearchVisible = !this.headerSearchVisible;
this.clickIsSearchBtn = false;
}
}
}),
h('DropdownMenu', {slot: 'list'},
[
h('DropdownItem', {
class: 'myDropdown',
style: {
fontSize: '14px !important',
textAlign: 'left'
},
nativeOn: {
click: (name) => {
//console.log(name);
}
},
}, [
h('RadioGroup', {
props: {
value: this.verticalSearch,
vertical: true
},
on: {
'on-change': (status) => {
//console.log(status);
this.verticalSearch = status;
}
}
},
[
h('Radio', {
props: {
label: '全部可检索'
}
}, '全部可检索'),
h('Radio', {
props: {
label: '全部不可检索'
}
}, '全部不可检索')
]
),
h('div', [
h('Button', {
props: {
size: 'small'
},
style: {
fontSize: '14px',
marginTop: '10px',
marginRight: '10px'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerSearchVisible = false;
}
}
}, '取消'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
fontSize: '14px',
marginTop: '10px'
},
on: {
click: ($event) => {
$event.stopPropagation();
this.headerSearchVisible = false;
this.clickIsSearchBtn = true;
if (this.verticalSearch === "全部可检索") {
sessionStorage.setItem("isSearch", "1")
} else if (this.verticalSearch === "全部不可检索") {
sessionStorage.setItem("isSearch", "0")
}
}
}
}, '确定')
])
])
]
)
])
},
render: (h, params) => {
let status = params.row.isSearch; //1是可 0是不可
//点击确定按钮时，将可检索这一列的所有状态全部设置成所选择的状态
if(this.clickIsSearchBtn){
this.headerSearchVisible = false;
this.clickIsSearchBtn = false;
if (this.verticalSearch === "全部可检索") {
status = 1;
} else if (this.verticalSearch === "全部不可检索") {
status = 0;
}
}
if(parseInt(sessionStorage.getItem("isSearch")) === 0){
if(this.data1.length>0){
this.data1.map(function(item){
item.isSearch= 0
});
}
}else if(parseInt(sessionStorage.getItem("isSearch")) === 1){
if(this.data1.length>0){
this.data1.map(function(item){
item.isSearch= 1
});
}
}
if (status === 1) {
return h('span', [
h('Icon', {
props: {
type: "md-checkmark"
},
style: {
marginRight: '8px',
marginTop: '-3px',
color: '#19be6b',
fontSize: '18px',
cursor: 'pointer'
},
on: {
click: ($event) => {
$event.stopPropagation();
if ($event.target.className === "ivu-icon ivu-icon-md-checkmark") {
$event.target.className = "ivu-icon ivu-icon-md-close";
} else if ($event.target.className === "ivu-icon ivu-icon-md-close") {
$event.target.className = "ivu-icon ivu-icon-md-checkmark";
}
}
}
})
])
}
if (status === 0) {
return h('span', [
h('Icon', {
props: {
type: "md-close"
},
style: {
marginRight: '8px',
marginTop: '-3px',
color: '#ed4014',
fontSize: '18px',
cursor: 'pointer'
},
on: {
click: ($event) => {
$event.stopPropagation();
if ($event.target.className === "ivu-icon ivu-icon-md-checkmark") {
$event.target.className = "ivu-icon ivu-icon-md-close";
} else if ($event.target.className === "ivu-icon ivu-icon-md-close") {
$event.target.className = "ivu-icon ivu-icon-md-checkmark";
}
}
}
})
])
}
}
},
{
title: 'Address',
key: 'address',
align: 'center'
}
],
data1: [
{
name: 'John Brown',
isSearch: 1,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
isSearch: 0,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
isSearch: 0,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
isSearch: 1,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
}
}