vxe-table使用之自定义渲染器的使用

vex-table是一款适用于pc端的UI组件，使用的于业务场景为较复杂表格；配合Vue3使用更佳；

开始及使用

安装依赖

npm install xe-utils vxe-table@next

引入声明文件（使用的是vue3）

import { App, createApp } = 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

function useTable (app: App) {
  app.use(VXETable)
}
createApp(App).use(useTable).mount('#app')

在项目文建立一个放置公共组件的文件夹并命名为components，接下来再创立一个子文件vxeFliter文件夹；文件夹下再建立一个index.tsx及filterContent.vue文件index.ts文件

import VXETable from 'vxe-table';
import {createVNode } from "vue"
import filterContent from './filterContent.vue';

// 创建一个支持列内容的筛选
VXETable.renderer.add('filterContent', {
  // 不显示底部按钮，使用自定义的按钮
  showFilterFooter: false,
  // 筛选模板
  renderFilter(renderOpts, params) {
    return [createVNode(filterContent, { renderOpts, params })];
  },
  // 重置数据方法
  filterResetMethod(params) {
    const { options } = params;
    options.forEach((option) => {
      option.data = { vals: [], sVal: '' };
    });
  },
  // 筛选数据方法
  filterMethod(params) {
    const { option, row, column } = params;
    const { vals } = option.data;
    const cellValue = row[column.property];
    return vals.includes(cellValue);
  },
});

filterContent文件

Ps:在index.tsx文件中 声明挂载自定义的filter的时候；之前renderFilter中的返回值必须是带有dom的标签；示例demo的写法有误差，会有ts的语法错误;导出的组件必须用createVNode的包裹一层，使用方正常

/*
right code
*/

renderFilter(renderOpts, params) {
    return [createVNode(filterContent, { renderOpts, params })];
},


/*
wrong code 
*/

renderFilter(renderOpts, params) {
    return [<filterContent params={params}} />];
},

最后将components/vxeFilter/index.tsx 文件引入main.ts文件

filterContent的使用

/*使用 vex-table和vex-grid的进行配置*/
<vxe-grid ref='xGrid' v-bind="gridOptions" :column="column"></vxe-grid>

const column= ref([
         {
            field: 'product_code',
            minwidth: 100,
            title: 'Product',
            filters: [{ data: { vals: [] } }], 
            filterRender: { name: 'filterContent' }
        },
    ])