外部控制antd pro vue s-table组件筛选功能的一种实现方法

前端 721浏览 0 评



// eslint-disable-next-line
import Vue from 'vue'


const columns = [

    {
        title: '开始时间',
        dataIndex: 'startTime',
        key: 'startTime',
        customRender: value => Vue.filter('datetime')(value),
        filters: [],//组件自带的筛选器
        filteredValue: null,//外部传递的筛选值,默认为null
        onFilter: (value, record) => record.startTime.includes(value)
    }
]

export default {
    data() {
        this.columns = columns
        return {    
            // 表格过滤信息
            filteredInfo: {},
            // 加载数据方法 必须为 Promise 对象; parameter是分页信息;
            loadData: parameter => {
                //此处为s-table加载数据的方法
            },
            selectedRowKeys: [],
            selectedRows: []
        }
    },
    filters: {
    },
    created() {
    },
    computed: {
    },
    methods: {     
        handleSearch() {
            // 将columns中的属性置空,便于下次查询,0指的是筛选项在columns中的位置,依具体情况而定
            this.columns[0].filters = []
            this.columns[0].filteredValue = null
            if (this.filterOptions) {
                // 遍历,用课程时间形成过滤器选项,filterOptions为后端获取的过滤器选项
                this.filterOptions.forEach(element => {
                    this.columns[8].filters.push(
                        {
                            text: element,
                            value: element
                        }
                    )
                })
            }
            // 如果选择框中有值
            if (this.selectedValue !== undefined) {
                // 将选项添加到筛选条件中
                this.filteredInfo.startTime= [this.selectedValue]
                this.columns[0].filteredValue = this.filteredInfo.startTime
            } else {
                this.columns[0].filteredValue = null
            }
        },
        // 重置查询条件并刷新表格
        searchReset() {}
            this.selectedValue = undefined
            // this.filteredInfo.name= []
            this.columns[0].filteredValue = null
            this.$refs.table.refresh()
        },
       }
}

上一篇

共有 0 条评论