• Element - el-table 表头列字段筛选 支持一个页面多table

    一、效果

    二、使用

    2.1 组件代码

    2.  
    3. <script>
    4. export default {
    5.   inject: ['reload'],
    6.   data () {
    7.     return {
    8.       value: '',
    9.       visible: false,
    10.       iconColor: false
    11.     }
    12.   },
    13.   props: {
    14.     tableType: {
    15.       type: String,
    16.       default: ''
    17.     },
    18.     type: {
    19.       type: String,
    20.       default: ''
    21.     },
    22.     defaultValue: {
    23.       type: String,
    24.       default: ''
    25.     },
    26.     options: {
    27.       type: Array,
    28.       default: function () {
    29.         return []
    30.       }
    31.     },
    32.     defaultProps: {
    33.       type: Object,
    34.       default: function () {
    35.         return {
    36.           label: 'label',
    37.           value: 'value'
    38.         }
    39.       }
    40.     }
    41.   },
    42.   watch: {
    43.     defaultValue (newVal, oldVal) {
    44.       const self = this
    45.       self.value = newVal
    46.     }
    47.  
    48.   },
    49.   methods: {
    50.       showPopover () {
    51.         this.$nextTick(() => {
    52.         this.$refs.sInput.focus()
    53.         })
    54.       },
    55.       resetData () {
    56.           console.log('reset')
    57.           this.value = ''
    58.           this.visible = false
    59.           this.iconColor = false
    60.           const self = this
    61.           self.$emit('resetChange', { type: self.type, value: self.value, tableType: self.tableType })
    62.       },
    63.       closeOver () {
    64.           this.visible = false
    65.       },
    66.       popClick (e) {
    67.           // e.stopPropagation()
    68.           this.visible = !this.visible
    69.       },
    70.       confirm () {
    71.           this.visible = false
    72.           this.iconColor = true
    73.           const self = this
    74.           if (self.value) {
    75.               self.$emit('selectChange', { type: self.type, value: self.value, tableType: self.tableType })
    76.           }
    77.       }
    78.     },
    79.     directives: {
    80.         clickOutside: {
    81.             bind (el, binding, vnode) {
    82.             function clickHandler (e) {
    83.             // 这里判断点击的元素是否是本身，是本身，则返回
    84.                 if (el.contains(e.target)) {
    85.                     return false
    86.                 }
    87.                 // 判断指令中是否绑定了函数
    88.                 if (binding.expression) {
    89.                     // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
    90.                     binding.value(e)
    91.                 }
    92.                 }
    93.                 // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    94.                 el.__vueClickOutside__ = clickHandler
    95.                 document.addEventListener('click', clickHandler)
    96.             },
    97.             update () {},
    98.             unbind (el, binding) {
    99.                 // 解除事件监听
    100.                 document.removeEventListener('click', el.__vueClickOutside__)
    101.                 delete el.__vueClickOutside__
    102.             }
    103.         }
    104.     }
    105.   }
    106. script>

    2.2 引入该组件

    import SelectHeader from '@/components/SelectHeader/SelectHeader'

    2.3 添加渲染方法

    1. methods: {
    2.       filData () {
    3.  
    4.       },
    5.       // 渲染**的tableheader
    6.       renderSpecNameHeader (createElement, { column, $index }) {
    7.         const self = this
    8.         // 该列的绑定数据
    9.         // console.log(column.label);
    10.         // 列号
    11.         // console.log($index);
    12.         return createElement(
    13.           'div',
    14.           {
    15.             style: 'display:inline-flex;'
    16.           },
    17.           [
    18.             createElement('div', {
    19.               domProps: {
    20.                 innerHTML: column.label
    21.               }
    22.             }),
    23.             createElement(SelectHeader, {
    24.               style: 'cursor: pointer;',
    25.               // 组件 prop
    26.               props: {
    27.                 type: column.property,
    28.                 options: self.specIdOptions, // 下拉框选项
    29.                 defaultValue: self.examinerFieldChname, // 默认值
    30.                 defaultProps: {
    31.                   value: 'examinerFieldName',
    32.                   label: 'examinerFieldChname'
    33.                 }
    34.               },
    35.               // 事件监听器在 `on` 属性内，
    36.               // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
    37.               // 需要在处理函数中手动检查 keyCode。
    38.               on: {
    39.                 selectChange: self.selectChange,
    40.                 resetChange: self.resetChange
    41.                 // click: this.clickHandler
    42.               },
    43.               // 仅用于组件，用于监听原生事件，而不是组件内部使用
    44.               // `vm.$emit` 触发的事件。
    45.               nativeOn: {
    46.                 // click: this.nativeClickHandler
    47.               }
    48.             })
    49.           ]
    50.         )
    51.       },
    52.       // 选择框回调
    53.       selectChange (data) {
    54.           console.log('回调', data)
    55.           // 自定义筛选框返回数据进行过滤添加到tableData数组中
    56.           const type = data['type']
    57.           const value = data['value']
    58.           this.rules[type] = value
    59.           if (value !== '' && type !== '') {
    60.             this.tableDataDeal = this.tableDataDeal.filter(item =>
    61.               item[type]
    62.                 .toString()
    63.                 .toLowerCase()
    64.                 .includes(value.toString().toLowerCase())
    65.             )
    66.           }
    67.         },
    68.         // 重置回调
    69.         resetChange (data) {
    70.           console.log('重置回调', data)
    71.           delete this.rules[data['type']]
    72.           var tmpData = this.tableDataDealCopy
    73.           for (const key in this.rules) {
    74.               tmpData = tmpData.filter(item =>
    75.               item[key]
    76.                 .toString()
    77.                 .toLowerCase()
    78.                 .includes(this.rules[key].toString().toLowerCase()
    79.                 )
    80.             )
    81.           }
    82.           this.tableDataDeal = tmpData
    83.         },

    2.4 使用组件

    在需要添加的column上增加:render-header

    2.    prop="volume"
    3.    label="Volume"
    4.    width="150"
    5.    align="right"
    6.    :render-header="renderSpecNameHeader"
    7.    sortable
    8.    :formatter="thFormatter"
    9.    show-overflow-tooltip>

    三、注意点

    3.1 头部添加搜索icon 点击显示popover 阻止在字段排序

    使用的element内置的排序sortable 那么在点击整个表格头部区域时 都会触发排序

    故在点击搜索icon的时候也会排序，影响体验，需要阻止这个排序

    用@click.stop=“popClick” 来阻止默认的排序

    3.2头部添加搜索icon 点击popover外时，关闭popover，自定义指令

    原来是在点击icon打开popover时，想关闭这个popover需要再次点击icon

    这很明显不合理，更合适的方法是点击其它任何区域，都会隐藏这个popover

    于是用到了自定义指令。

    在组件内部，新增一个visible变量控制是否显示，在点击外部时，设置为false

    1. data () {
    2.     return {
    3.       value: '',
    4.       visible: false,
    5.       iconColor: false
    6.     }
    7.   },
    8. methods: {
    9. closeOver () {
    10.           this.visible = false
    11.       },
    12. }
    13.  
    14. directives: {
    15.         clickOutside: {
    16.             bind (el, binding, vnode) {
    17.             function clickHandler (e) {
    18.             // 这里判断点击的元素是否是本身，是本身，则返回
    19.                 if (el.contains(e.target)) {
    20.                     return false
    21.                 }
    22.                 // 判断指令中是否绑定了函数
    23.                 if (binding.expression) {
    24.                     // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
    25.                     binding.value(e)
    26.                 }
    27.                 }
    28.                 // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    29.                 el.__vueClickOutside__ = clickHandler
    30.                 document.addEventListener('click', clickHandler)
    31.             },
    32.             update () {},
    33.             unbind (el, binding) {
    34.                 // 解除事件监听
    35.                 document.removeEventListener('click', el.__vueClickOutside__)
    36.                 delete el.__vueClickOutside__
    37.             }
    38.         }
    39.     }

    自定义指令写好后，在icon外部div上添加即可

    <div slot="reference" style="margin-left:5px" @click.stop="popClick" v-click-outside="closeOver">

    3.3 头部添加搜索icon 点击重置按钮，重置对应字段的筛选条件

    如果在数据筛选时对原始数据进行操作，那么想重置该筛选条件的话，就需要重新获取数据（刷新页面）

    不合理，需要实现重置某筛选条件的功能。

    组件内部的重置按钮click方法

    <el-button size="mini" @click="resetData">重置el-button>

    将组件input框中的数据清空， 组件改为隐藏， 修改icon颜色，触发父组件的resetChange方法

    1. resetData () {
    2.           console.log('reset')
    3.           this.value = ''
    4.           this.visible = false
    5.           this.iconColor = false
    6.           const self = this
    7.           self.$emit('resetChange', { type: self.type, value: self.value, tableType: self.tableType })
    8.       },

    实现逻辑如下：

    1. 请求接口获取数据，加载到table，并且保存一个数据备份
    2. 搜索时，筛选出符合条件的数据，并且记录筛选条件
    3. 重置时，先将重置的这个条件从rules中删除，再用备份的数据，用剩下的条件过滤
    4. 修改table的data
    1. // 选择框回调 
    2.       selectChange (data) {
    3.           console.log('回调', data)
    4.           // 自定义筛选框返回数据进行过滤添加到tableData数组中
    5.           const type = data['type']
    6.           const value = data['value']
    7.           this.rules[type] = value
    8.           if (value !== '' && type !== '') {
    9.             this.tableDataDeal = this.tableDataDeal.filter(item =>
    10.               item[type]
    11.                 .toString()
    12.                 .toLowerCase()
    13.                 .includes(value.toString().toLowerCase())
    14.             )
    15.           }
    16.         },
    17. // 重置回调 
    18.         resetChange (data) {
    19.           console.log('重置回调', data)
    20.           delete this.rules[data['type']]
    21.           var tmpData = this.tableDataDealCopy
    22.           for (const key in this.rules) {
    23.               tmpData = tmpData.filter(item =>
    24.               item[key]
    25.                 .toString()
    26.                 .toLowerCase()
    27.                 .includes(this.rules[key].toString().toLowerCase()
    28.                 )
    29.             )
    30.           }
    31.           this.tableDataDeal = tmpData
    32.         },

    3.4 一个页面有多个table表格 render-header传参

    在同一个页面中有多个表格时，需要对父组件进行一些修改

    在render-header 时 多传递一个参数 来标记新的table

    1.  
    2.               prop="instrument"
    3.               label="Instrument"
    4.               width="190"
    5.               align="center"
    6.               :render-header="(h, obj) => renderSpecNameHeader(h, obj, '4')"
    7.               sortable
    8.               show-overflow-tooltip>
    9.             ```
    10.  
    11.

    在createElement 时将tableType传给子组件

    1. methods: {
    2.       // 渲染**的tableheader
    3.       renderSpecNameHeader (createElement, { column, $index }, tableType) {
    4.         const self = this
    5.         // 该列的绑定数据
    6.         // console.log(column.label);
    7.         // 列号
    8.         // console.log($index);
    9.         return createElement(
    10.           'div',
    11.           {
    12.             style: 'display:inline-flex;'
    13.           },
    14.           [
    15.             createElement('div', {
    16.               domProps: {
    17.                 innerHTML: column.label
    18.               }
    19.             }),
    20.             createElement(SelectHeader, {
    21.               style: 'cursor: pointer;',
    22.               // 组件 prop
    23.               props: {
    24.                 tableType: tableType,
    25.                 type: column.property,
    26.                 options: self.specIdOptions, // 下拉框选项
    27.                 defaultValue: self.examinerFieldChname, // 默认值
    28.                 defaultProps: {
    29.                   value: 'examinerFieldName',
    30.                   label: 'examinerFieldChname'
    31.                 }
    32.               },
    33.               // 事件监听器在 `on` 属性内，
    34.               // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
    35.               // 需要在处理函数中手动检查 keyCode。
    36.               on: {
    37.                 selectChange: self.selectChange,
    38.                 resetChange: self.resetChange
    39.                 // click: this.clickHandler
    40.               },
    41.               // 仅用于组件，用于监听原生事件，而不是组件内部使用
    42.               // `vm.$emit` 触发的事件。
    43.               nativeOn: {
    44.                 // click: this.nativeClickHandler
    45.               }
    46.             })
    47.           ]
    48.         )
    49.       },

    在子组件中，返回tableType

    1. confirm () {
    2.           this.visible = false
    3.           this.iconColor = true
    4.           const self = this
    5.           if (self.value) {
    6.               self.$emit('selectChange', { type: self.type, value: self.value, tableType: self.tableType })
    7.           }
    8.       }

    最后在父组件的回调中，对两个表格数据进行区分处理

    1. // 选择框回调
    2.       selectChange (data) {
    3.           console.log('回调', data)
    4.           // 自定义筛选框返回数据进行过滤添加到tableData数组中
    5.           const type = data['type']
    6.           const value = data['value']
    7.           const tableType = data['tableType']
    8.           var tableName = ''
    9.           var ruleName = ''
    10.           if (tableType === '4') {
    11.             tableName = 'tableDataPosition'
    12.             ruleName = 'rulesPos'
    13.           } else {
    14.             tableName = 'tableDataDeal'
    15.             ruleName = 'rules'
    16.           }
    17.           this[ruleName][type] = value
    18.           if (value !== '' && type !== '') {
    19.             this[tableName] = this[tableName].filter(item =>
    20.               item[type]
    21.                 .toString()
    22.                 .toLowerCase()
    23.                 .includes(value.toString().toLowerCase())
    24.             )
    25.           }
    26.         },
    27.         // 重置回调
    28.         resetChange (data) {
    29.           console.log('重置回调', data)
    30.           const tableType = data['tableType']
    31.           var tableName = ''
    32.           var tableNameCopy = ''
    33.           var ruleName = ''
    34.           if (tableType === '4') {
    35.             tableName = 'tableDataPosition'
    36.             tableNameCopy = 'tableDataPositionCopy'
    37.             ruleName = 'rulesPos'
    38.           } else {
    39.             tableName = 'tableDataDeal'
    40.             tableNameCopy = 'tableDataDealCopy'
    41.             ruleName = 'rules'
    42.           }
    43.  
    44.           delete this[ruleName][data['type']]
    45.           var tmpData = this[tableNameCopy]
    46.           for (const key in this[ruleName]) {
    47.               tmpData = tmpData.filter(item =>
    48.               item[key]
    49.                 .toString()
    50.                 .toLowerCase()
    51.                 .includes(this[ruleName][key].toString().toLowerCase()
    52.                 )
    53.             )
    54.           }
    55.           this[tableName] = tmpData
    56.         },
  • 相关阅读:
    Docker php nginx mysql redis 控制脚本（一键启动）
    【echarts】07、echarts+vue2 - 环形图
    pmp考试题型需要注意哪些？
    Lwip之SNMP协议与实现
    数字孪生技术助力城市轨道交通智慧升级
    ES6 特性
    想知道如何图片转文字？这几个方法你别错过
    SM7加密算法：安全与效率的平衡之作
    Django实现音乐网站 ⒅
    naive-ui-admin BasicTable 列表操作栏显示图标icon
  • 原文地址：https://blog.csdn.net/hutuyaoniexi/article/details/127666475