vxe-table 是vue中非常强大的表格的,公司项目中复杂的渲染都是用 vxe-table 的,对于用的排序。筛选之类的都能支持,而且也能任意扩展,非常强大。
默认筛选功能
筛选的普通用法就是给对应的列指定参数:
filters:[] 选项数组
<template><div><vxe-tableborderheight="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 } = thisif (params) {const { column } = paramsconst option = column.filters[0]this.currOption = option}},changeOptionEvent () {const { params } = thisconst option = this.currOptionif (params && option) {const { $panel } = paramsconst checked = !!option.data.name$panel.changeOption(null, checked, option)}},confirmEvent () {const { params } = thisif (params) {const { $panel } = params$panel.confirmFilter()}},resetEvent () {const { params } = thisif (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-tableborderheight="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>
https://gitee.com/xuliangzhan/vxe-table