vxe-table 进阶扩展(一)，扩展筛选高级用法

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 setup>
import { ref } from 'vue'

const tableData = ref([
  { 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 = ref([
  { label: 'Man', value: '1' },
  { label: 'Woman', value: '0' }
])

const ageOptions = ref([
  { label: '28', value: 28 },
  { label: '22', value: 22 },
  { label: '38', value: 38 }
])
</script>

进阶扩展

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

接下来就可以实现

定义渲染器

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

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

// 创建一个带条件的筛选渲染器
VxeUI.renderer.add('MyTableFilterComplex', {
    // 不显示底部按钮，使用自定义的按钮
    showTableFilterFooter: false,
    // 自定义筛选模板
    renderTableFilter(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">
      <VxeRadio v-model="currOption.data.type" name="fType" label="has">包含</VxeRadio>
      <VxeRadio v-model="currOption.data.type" name="fType" label="eq">等于</VxeRadio>
    </div>
    <div class="my-fc-name">
      <VxeInput v-model="currOption.data.name" class="my-fc-input" mode="text" placeholder="请输入名称" @input="changeOptionEvent()"></VxeInput>
    </div>
    <div class="my-fc-footer">
      <VxeButton @click="resetEvent">重置</VxeButton>
      <VxeButton status="primary" @click="confirmEvent">确认</VxeButton>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue'

const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})

const currOption = ref()

const load = () => {
  const { params } = props
  if (params) {
    const { column } = params
    const option = column.filters[0]
    currOption.value = option
  }
}

const changeOptionEvent = () => {
  const { params } = props
  const option = currOption.value
  if (params && option) {
    const { $panel } = params
    const checked = !!option.data.name
    $panel.changeOption(null, checked, option)
  }
}

const confirmEvent = () => {
  const { params } = props
  if (params) {
    const { $panel } = params
    $panel.confirmFilter()
  }
}

const resetEvent = () => {
  const { params } = props
  if (params) {
    const { $panel } = params
    $panel.resetFilter()
  }
}

watch(() => {
  const { column } = props.params || {}
  return column
}, load)

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 lang="jsx" setup>
import { ref } from 'vue'

const tableData = ref([
  { 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 = ref([
  { data: { type: 'has', name: '' } }
])

const sexOptions = ref([
  { data: { type: 'has', name: '' } }
])
</script>

gitee.com/xuliangzhan…