vxe-table 3.10+ 进阶高级用法(一)，根据业务需求自定义实现筛选功能

news2024/12/29 10:28:25

vxe-table 是vue中非常强大的表格的，公司项目中复杂的渲染都是用 vxe-table 的，对于用的排序。筛选之类的都能支持，而且也能任意扩展，非常强大。

默认筛选功能

筛选的普通用法就是给对应的列指定参数：
filters：[] 选项数组

在这里插入图片描述

<template>
  <div>
    <vxe-table
      border
      height="400"
      :data="tableData">
      <vxe-column field="id" title="ID"></vxe-column>
      <vxe-column field="name" title="Name" ></vxe-column>
      <vxe-column field="sex" title="Sex" :filters="sexOptions" :filter-multiple="false"></vxe-column>
      <vxe-column field="age" title="Age" :filters="ageOptions"></vxe-column>
      <vxe-column field="time" title="Time"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    const tableData = [
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
    ]
    
    const sexOptions = [
      { label: 'Man', value: '1' },
      { label: 'Woman', value: '0' }
    ]
    
    const ageOptions = [
      { label: '28', value: 28 },
      { label: '22', value: 22 },
      { label: '38', value: 38 }
    ]
    
    return {
      tableData,
      sexOptions,
      ageOptions
    }
  }
}
</script>

进阶扩展

在这里插入图片描述

上面看了普通用法，接下就详细讲一下扩展高级用法，这就涉及到渲染器了。筛选需要用法渲染的几个方法：
showTableFilterFooter // 是否显示筛选底部，可以关闭，使用自定义底部
renderTableFilter // 自定义筛选模板
tableFilterResetMethod // 自定义重置数据方法
tableFilterRecoverMethod / 自定义重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
tableFilterMethod // 自定义筛选方法

接下来就可以实现

定义渲染器

定义渲染器文件：src/plugins/vxe/render.js

// main.js
import { VxeUI } from 'vxe-table';
import FilterComplex from './filters/FilterComplex.vue';

// 创建一个带条件的筛选渲染器
VxeUI.renderer.add('MyTableFilterComplex', {
    // 不显示底部按钮，使用自定义的按钮
    showTableFilterFooter: false,
    // 自定义筛选模板
    renderTableFilter(h, renderOpts, params) {
        return <FilterComplex params={params} />;
    },
    // 自定义重置数据方法
    tableFilterResetMethod(params) {
        const { options } = params;
        options.forEach((option) => {
            option.data = { type: 'has', name: '' };
        });
    },
    // 自定义筛选数据方法
    tableFilterMethod(params) {
        const { option, row, column } = params;
        const cellValue = row[column.field];
        const { name, type } = option.data;
        if (cellValue) {
            if (type === 'has') {
                return cellValue.indexOf(name) > -1;
            }
            return cellValue === name;
        }
        return false;
    }
})

创建文件筛选面板组件：src/plugins/vxe/filters/FilterComplex.vue

<template>
  <div v-if="currOption" class="my-filter-complex">
    <div class="my-fc-type">
      <vxe-radio v-model="currOption.data.type" name="fType" label="has">包含</vxe-radio>
      <vxe-radio v-model="currOption.data.type" name="fType" label="eq">等于</vxe-radio>
    </div>
    <div class="my-fc-name">
      <vxe-input v-model="currOption.data.name" class="my-fc-input" mode="text" placeholder="请输入名称" @input="changeOptionEvent()"></vxe-input>
    </div>
    <div class="my-fc-footer">
      <vxe-button @click="resetEvent">重置</vxe-button>
      <vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      currOption: null
    }
  },
  methods: {
    load () {
      const { params } = this
      if (params) {
        const { column } = params
        const option = column.filters[0]
        this.currOption = option
      }
    },
    changeOptionEvent () {
      const { params } = this
      const option = this.currOption
      if (params && option) {
        const { $panel } = params
        const checked = !!option.data.name
        $panel.changeOption(null, checked, option)
      }
    },
    confirmEvent () {
      const { params } = this
      if (params) {
        const { $panel } = params
        $panel.confirmFilter()
      }
    },
    resetEvent () {
      const { params } = this
      if (params) {
        const { $panel } = params
        $panel.resetFilter()
      }
    }
  },
  watch: {
    'params.column' () {
      this.load()
    }
  },
  created () {
    this.load()
  }
}
</script>

<style lang="scss" scoped>
.my-filter-complex {
  width: 260px;
  padding: 5px 15px 10px 15px;
  .my-fc-type {
    padding: 8px 0;
  }
  .my-fc-input {
    width: 100%;
  }
  .my-fc-footer {
    text-align: center;
    margin-top: 8px;
  }
}
</style>

src/main.js 中全局引入渲染器：

// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

import './plugins/vxe/render'

createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...

然后使用

通过 filter-render={ name: ‘MyTableFilterComplex’ } 指定 name 就可以调用渲染器，其中 name 就是自定义的渲染器名称。

<template>
  <div>
    <vxe-table
      border
      height="300"
      :data="tableData">
      <vxe-column type="seq" width="50"></vxe-column>
      <vxe-column field="name" title="Name" :filters="roleOptions" :filter-render="{name: 'MyTableFilterComplex'}"></vxe-column>
      <vxe-column field="sex" title="Sex" :filters="sexOptions" :filter-render="{name: 'MyTableFilterComplex'}"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    const tableData = [
      { id: 10001, name: 'Test1', sex: 'Man', age: 28 },
      { id: 10002, name: 'Test2', sex: 'Women', age: 22 },
      { id: 10003, name: 'Test3', sex: 'Man', age: 32 },
      { id: 10004, name: 'Test4', sex: 'Women', age: 23 }
    ]
    
    const roleOptions = [
      { data: { type: 'has', name: '' } }
    ]
    
    const sexOptions = [
      { data: { type: 'has', name: '' } }
    ]
    
    return {
      tableData,
      roleOptions,
      sexOptions
    }
  }
}
</script>