本文已参与[新人创作礼]活动，一起开启掘金创作之路。

问题1-select多选时一开始就触发form表单rules表单校验规则问题

问题描述：使用form表单的校验规则，即rules表单验证规则。当select为多选时，打开页面就会触发校验规则。一般是点击确定按钮才会触发校验规则。

原因：select设置multiple属性后，v-model接收的应该是一个数组，初始值也应该是个空数组。

value是多选select的v-model绑定的值，我是在设置初始值时，是这样的：

<el-form-item label="下拉框" prop="value">
    <el-select v-model="ruleForm.value" size="small" multiple collapse-tags style="margin-left: 20px" placeholder="请选择下拉框">
        <el-option v-for="item in valueList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>
</el-form-item>
...
data() {
    return {
        ruleForm: {
            value: '',
            desc: ''
        },
        valueList: [
            {
                value: '姓名',
                label: '姓名'
            },
            {
                value: '电话',
                label: '电话'
            }
        ],
        rules: {
            value: [{ required: true, message: '请选择下拉框', trigger: 'change' }],
            desc: [{ required: true, message: '请输入描述', trigger: 'blur' }]
        }
    };
},
...

这样设置，当选择多个值后，value也会是一个数组。但是就是会自动触发校验规则。所以将value的初始值设置为一个空数组。

...
ruleForm: {
    name: '',
    value: []
}
...

解决方法：将多选select的v-model绑定的初始值设置为空数组。

element-ui中select的官网地址：element.eleme.cn/#/zh-CN/com…

问题2-select自定义时，点击option中的操作按钮时会触发成功但是下拉框收起显示选择的option的值。

问题描述：在自定义select下拉框时，每个option都有一个删除和编辑按钮，但是点击对应按钮时，方法能调用，但是下拉框会搜索并显示点击的那一行的option的值。

原因：因为option也是点击选择，所以出现了事件冒泡，在点击编辑或者删除时，事件会向上冒泡。

解决方法：删除和编辑点击时，使用@click.stop，阻止事件冒泡。