优化列表筛选组件数据传递，下拉组件允许取消“取消选择”的选择

Tevin

2021-09-16 d374e0e90612996a0a2f81d734d793189a40706d

优化列表筛选组件数据传递，下拉组件允许取消“取消选择”的选择

 plugins/filter/CFilter.vue

@@ -14,6 +14,7 @@
                type="bar"
                :label="bar.label"
                :options="selectOptions[bar.name] || []"
                :cancelable="bar.cancelable"
                :value="filterRes[bar.name]"
                :onChange="evt=>handleBarChange(bar.name, evt)"
            />
@@ -100,6 +101,7 @@
        CFilterDateRange,
    },
    props: {
        filterData: { type: Object, default: () => {} },
        // 筛选横条项目
        bar: { type: Object, default: () => {} },
        // 筛选展开层项目列表
@@ -111,8 +113,10 @@
    },
    data() {
        return {
            filterRes: {},
            filterRes: this.filterData,
            // 抽屉显示隐藏
            drawerShow: false,
            // 抽屉内容显示隐藏(抽屉展开动画完成后再渲染表单，否则出现动画卡顿)
            drawerDisplay: false,
            // 面板项有已选
            itemsFilled: false,
@@ -126,7 +130,7 @@
            this.$nextTick(() => {
                setTimeout(() => {
                    this.drawerDisplay = true;
                }, 80);
                }, 100);
            });
        },
        handleBarChange(name, value) {

 plugins/filter/CFilterSelect.vue

@@ -45,7 +45,11 @@
        label: String,
        options: {
            type: Array,
            default: [],
            default: () => [],
        },
        cancelable: {
            type: Boolean,
            default: true,
        },
        value: null,
        onChange: Function,
@@ -55,7 +59,11 @@
    },
    computed: {
        options2() {
            if (this.cancelable) {
            return [{ name: '- 取消选择 -' }, ...this.options];
            } else {
                return [...this.options];
            }
        },
        current() {
            for (let i = 0, item; (item = this.options2[i]); i++) {
@@ -80,11 +88,15 @@
    methods: {
        handleChange(index) {
            const selectIndex = Number(index);
            if (this.cancelable) {
            if (selectIndex > 0) {
                this.onChange(this.options2[selectIndex].value);
            } else {
                this.onChange();
            }
            } else {
                this.onChange(this.options2[selectIndex].value);
            }
        },
    },
};