vue2自定义类型

需求：需要搜索筛选复选框

• 在src/components新建FilterExtend.vue，内容如下

<template>
    <div class="my-filter-excel">
    <!-- <div class="my-fe-top">
        <ul class="my-fe-menu-group">
          <li class="my-fe-menu-link">
            <span>升序</span>
          </li>
          <li class="my-fe-menu-link">
            <span>倒序</span>
          </li>
        </ul>
        <ul class="my-fe-menu-group">
          <li class="my-fe-menu-link" @click="resetFilterEvent">
            <span>清除筛选</span>
          </li>
          <li class="my-fe-menu-link">
            <i class="fa fa-filter my-fe-menu-link-left-icon"></i>
            <span>筛选条件</span>
            <i class="fa fa-caret-right my-fe-menu-link-right-icon"></i>
            <div class="my-fe-menu-child-list">
              <ul class="my-fe-child-menu-group-list" v-for="(cList, gIndex) in caseGroups" :key="gIndex">
                <li v-for="(cItem, cIndex) in cList" :key="cIndex" class="my-fe-child-menu-item" @click="childMenuClickEvent(cItem)">
                                                                                                  <span>{{ cItem.label }}</span>
                                                                                                </li>
                                                                                              </ul>
                                                                                            </div>
                                                                                          </li>
                                                                                        </ul>
                                                                                      </div> -->
        <div class="my-fe-search">
            <div class="my-fe-search-top">
                <vxe-input v-model="option.data.sVal" placeholder="搜索" type="search" clearable></vxe-input>
                <i class="fa fa-search my-fe-search-icon"></i>
            </div>

            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group class="my-fe-search-list" v-model="option.data.vals" @change="handleCheckedGroup">
                <el-checkbox :style="{ 'display': 'block' }" v-for="(val, sIndex) in searchList" :label="val"
                    :key="sIndex">{{ val }}</el-checkbox>
            </el-checkbox-group>

        </div>
        <div class="my-fe-footer">
            <vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
            <vxe-button @click="resetFilterEvent">重置</vxe-button>
        </div>
    </div>
</template>
  
<script>
import XEUtils from 'xe-utils'
/* eslint-disable */
export default {
    name: 'FilterExtend',
    props: {
        params: Object
    },
    data() {
        return {
            isIndeterminate: true,
            checkAll: false,
            column: null,
            option: null,
            colValList: [],
            // caseGroups: [
            //   [
            //     { value: 'equal', label: '等于' },
            //     { value: 'ne', label: '不等于' }
            //   ],
            //   [
            //     { value: 'greater', label: '大于' },
            //     { value: 'ge', label: '大于或等于' },
            //     { value: 'less', label: '小于' },
            //     { value: 'le', label: '小于或等于' }
            //   ]
            // ]
        }
    },
    computed: {
        searchList() {
            const { option, colValList } = this
            return option.data.sVal ? colValList.filter(val => val.toLowerCase().indexOf(option.data.sVal) > -1) : colValList
        }
    },
    // watch: {
    //     'option.data.sVal'(val) {
    //         console.log(val);
    //     }
    // },
    created() {
        this.load()
    },
    mounted() {
        let checkedCount = this.option.data.vals.length
        this.checkAll =  checkedCount == this.colValList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.colValList.length;
    },
    methods: {

        handleCheckAll(value) {
             //this.searchList 解决搜索时全选把整个数组都选啦的问题
            this.option.data.vals = value ? this.searchList : [];
            //this.option.data.vals = value ? this.colValList : [];
            this.isIndeterminate = false
        },
        handleCheckedGroup(value) {
            let checkedCount = value.length;

            this.checkAll = checkedCount === this.colValList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.colValList.length;

        },
        load() {
            const { $table, column } = this.params
            const { fullData } = $table.getTableData()
            const option = column.filters[0]
            // console.log(option);
            const colValList = Object.keys(XEUtils.groupBy(fullData, column.property))
            this.column = column
            this.option = option

            this.colValList = colValList
        },
        sAllEvent() {
            const { data } = this.option
            if (data.vals.length > 0) {
                data.vals = []
            } else {
                data.vals = this.colValList
            }
        },
        sItemEvent(val) {
            const { data } = this.option
            const vIndex = data.vals.indexOf(val)
            if (vIndex === -1) {
                data.vals.push(val)
            } else {
                data.vals.splice(vIndex, 1)
            }
        },
        confirmFilterEvent(evnt) {
            const { params, option } = this
            const { data } = option
            const { $panel } = params
            data.f1 = ''
            data.f2 = ''
            $panel.changeOption(evnt, true, option)
            $panel.confirmFilter()
        },
        resetFilterEvent() {
            const { $panel } = this.params
            $panel.resetFilter()
        },
        childMenuClickEvent(cItem) {
            this.$XModal.alert({ content: cItem.label })
        }
    }
}
</script>
  
<style>
.my-filter-excel {
    user-select: none;
}

.my-filter-excel .my-fe-top .my-fe-menu-group {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.my-filter-excel .my-fe-top .my-fe-menu-group:after {
    content: "";
    position: absolute;
    width: 190px;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #E2E4E7;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link {
    position: relative;
    padding: 4px 20px 4px 30px;
    cursor: pointer;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover {
    background-color: #C5C5C5;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-left-icon {
    position: absolute;
    left: 10px;
    top: 6px;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-right-icon {
    position: absolute;
    right: 10px;
    top: 6px;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover .my-fe-menu-child-list {
    display: block;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-menu-child-list {
    display: none;
    position: absolute;
    top: 0;
    right: -120px;
    width: 120px;
    background-color: #fff;
    border: 1px solid #DADCE0;
    box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list {
    position: relative;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list:after {
    content: "";
    position: absolute;
    width: 90px;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #E2E4E7;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list>.my-fe-child-menu-item {
    position: relative;
    padding: 4px 20px 4px 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list>.my-fe-child-menu-item:hover {
    background-color: #C5C5C5;
}

.my-filter-excel .my-fe-search {
    padding: 0 10px 0 30px;
}

.my-filter-excel .my-fe-search .my-fe-search-top {
    position: relative;
    padding: 5px 0;
}

.my-filter-excel .my-fe-search .my-fe-search-top>input {
    border: 1px solid #ABABAB;
    padding: 0 20px 0 2px;
    width: 200px;
    height: 22px;
    line-height: 22px;
}

.my-filter-excel .my-fe-search .my-fe-search-top>.my-fe-search-icon {
    position: absolute;
    right: 5px;
    top: 10px;
}

.my-filter-excel .my-fe-search .my-fe-search-list {
    width: 100%;
    margin: 0;
    /* border: 1px solid #E2E4E7; */
    padding: 2px 10px;
    overflow: auto;
    height: 140px;
}

.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item {
    cursor: pointer;
    padding: 2px 0;
}

.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item .my-fe-search-item-icon {
    width: 16px;
}

.my-filter-excel .my-fe-footer {
    text-align: right;
    padding: 10px 10px 10px 0;
}

.my-fe-popup .my-fe-popup-filter {
    padding-left: 30px;
}

.my-fe-popup .my-fe-popup-filter>.my-fe-popup-filter-select {
    width: 120px;
}

.my-fe-popup .my-fe-popup-filter>.my-fe-popup-filter-input {
    margin-left: 15px;
    width: 380px;
}

.my-fe-popup .my-fe-popup-describe {
    padding: 20px 0 10px 0;
}

.my-fe-popup .my-fe-popup-concat {
    padding-left: 50px;
}

.my-fe-popup .my-fe-popup-footer {
    text-align: right;
}
</style>
  

• 在src/utils下新建VXErender.js，如下

import VXETable from 'vxe-table'


// 创建一个复杂的筛选器 FilterExtend就是 :filter-render="{ name: 'FilterExtend' }" 的name
VXETable.renderer.add('FilterExtend', {
    // 不显示底部按钮，使用自定义的按钮
    isFooter: false,
    // 筛选模板
    renderFilter(h, renderOpts, params) {
    //   console.log(params);
      return [
        //全局注册的组件
        <filter-extend params={params}></filter-extend>
      ]
    },
    // 重置数据方法
    filterResetMethod({ options }) {
      options.forEach(option => {
        option.data = { vals: [], sVal: '', fMenu: '', f1Type: '', f1Val: '', fMode: 'and', f2Type: '', f2Val: '' }
      })
    },
    // 筛选数据方法
    filterMethod({ option, row, column }) {
      const cellValue = row[column.property]
      const { vals, f1Type, f1Val } = option.data
      if (cellValue) {
        if (f1Type) {
          return cellValue.indexOf(f1Val) > -1
        } else if (vals.length) {
          // 通过指定值筛选
          return vals.includes(cellValue)
        }
      }
      return false
    }
  })

• 在main.js下引入组件和自定义渲染
  
• 在需要的列加上下面的代码

<vxe-column field="address" title="自定义筛选" sortable :filters="[{ data: { vals: [] } }]"
                :filter-render="{ name: 'FilterExtend' }"></vxe-column>
                

这些也是从vex源码中提起的之后根据自己需求改

**一定要安装vxe-table、xe-utils、element-ui，下面是我安装的版本

yarn add xe-utils vxe-table@legacy element-ui

vxetable文档地址