iview的table的表头加下拉搜索操作等功能

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'
                   }
               ]
           }
       }
    }

第一次写博客文章，后续希望自己勤快点多写写吧~