ElementUI select组件实现全选

ElementUI select组件实现全选

效果图：

			<el-form-item label="发薪部门">
                <el-select size="medium" filterable v-model="downloadParam.orgName" clearable collapse-tags multiple
                           placeholder="请选择发薪部门"
                           @change="doSelectChange('orgName','org',accountOptions)">
                    <el-checkbox :style="{paddingLeft:'20px'}"
                                 :indeterminate="checkOptions.org.isIndeterminate"
                                 v-model="checkOptions.org.checkAll"
                                 @change="handleCheckAllChange('orgName','org',accountOptions,'org_name',$event)">
                        全选
                    </el-checkbox>
                    <el-option v-for="(data,index) in accountOptions" :key="data.org_code" :label="data.org_name"
                               :value="data.org_name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="核算中心">
                <el-select size="medium" filterable v-model="downloadParam.agentername2" clearable collapse-tags
                           multiple
                           placeholder="请选择核算中心"
                           @change="doSelectChange('agentername2','agenter',accountOptions)">
                    <el-checkbox :style="{paddingLeft:'20px'}"
                                 :indeterminate="checkOptions.agenter.isIndeterminate"
                                 v-model="checkOptions.agenter.checkAll"
                                 @change="handleCheckAllChange('agentername2','agenter',accountOptions,'org_name',$event)">
                        全选
                    </el-checkbox>
                    <el-option v-for="(data,index) in accountOptions" :key="data.org_code" :label="data.org_name"
                               :value="data.org_name">
                    </el-option>
                </el-select>
            </el-form-item>

		handleCheckAllChange(model, prop, options, id, value) {
            this.downloadParam[model] = value ? options.map(p => p[id || 'value']) || [] : [];
            this.checkOptions[prop].isIndeterminate = false
        },
        // 下拉框值改变触发
        doSelectChange(model, prop, options) {
            const checkLength = this.downloadParam[model].length
            this.checkOptions[prop].isIndeterminate = checkLength > 0 && checkLength < options.length;
            this.checkOptions[prop].checkAll = checkLength === options.length
        },

data里面定义一个对象（checkOptions）用来维持全选的状态

//v-model绑定的数据源
downloadParam: {
                orgName: [],//发薪部门
                agentername2: []//核算中心
            },
//checked使用的数据
 checkOptions: {
                org: {
                    isIndeterminate: false,
                    checkAll: false,
                },
                agenter: {
                    isIndeterminate: false,
                    checkAll: false,
                },
            }

实现原理（可参考element check组件的多选）：

1. handleCheckAllChange事件触发，根据传入的options去遍历这个list，再根据传入的id做筛选改变v-model的值。
2. doSelectChange事件：主要是实时触发选项然后去更改所对应的isIndeterminate值，维持checkBox的状态。

组件版

1.封装：

Vue.component('check-component', {
    name: 'checkComponent',
    template: `
    <div>
     <el-form ref="downloadParam" label-width="150px">
        <templete v-for="row in rowList">
              <el-form-item :label="row.labelName">
                    <el-tooltip effect="dark" :content="modelList[row.model].join(',')"
                            :disabled="!Boolean(modelList[row.model].length>0)" placement="top">
                        <el-select size="medium" filterable v-model="modelList[row.model]" clearable collapse-tags
                                   multiple
                                   :placeholder="row.placeholder"
                                   @change="doSelectChange(row)">
                            <el-checkbox :style="{paddingLeft:'20px'}"
                                         :indeterminate="row.isIndeterminate"
                                         v-model="row.checkAll"
                                         @change="handleCheckAllChange(row,$event)">
                                全选
                            </el-checkbox>
                            <el-option v-for="(data,index) in row.selectList" :key="data[row.key]" :label="data[row.label]"
                                       :value="data[row.value]">
                            </el-option>
                        </el-select>
                    </el-tooltip>
            </el-form-item>
        </templete>
    </el-form>
    </div>
  `,
    data() {
    },
    props: {
        rowList: {
            type: Array,
            default: function () {
                return []
            }
        },
        modelList: {
            type: Object,
            default: function () {
                return {}
            }
        },
    },
    methods: {
        handleCheckAllChange(row = {} , value) {
            this.modelList[row.model] = value ? row.selectList.map(p => p[row.value || 'value']) || [] : [];
            row.isIndeterminate = false
        },
        // 下拉框值改变触发
        doSelectChange(row = {}) {
            const checkLength = this.modelList[row.model].length
            row.isIndeterminate = checkLength > 0 && checkLength < row.selectList.length;
            row.checkAll = checkLength === row.selectList.length
        },
    },
    mounted() {
    }
})

2.使用：

<check-component :row-list="checkOption" :model-list="downloadParams"></check-component>

3.数据源：

data() {
        return {
            accountOptions: [],//核算中心下拉框
            downloadParams: {
                orgName: [], //发薪部门
            },
        }
    },
computed: {
        checkOption() {
            return [{
                labelName: '核算中心',
                placeholder: '请选择核算中心',
                model: 'orgName',
                checkAll: false,
                isIndeterminate: false,
                selectList: this.accountOptions,
                key: 'org_code',
                value: 'org_name',
                label: 'org_name'
            }]
        },
    },

4.最终效果图：