记录每一次遇到的问题及解决
1、select获取table值
select获取table值用 this.$refs.name.selectedLabel,在select上添加ref,仅仅使用这个可能会出现点击之后获取的是上一个的label值的情况,所以最好用$nextTick
<el-select v-model="id" clearable placeholder="请选择内容" ref="selection" style="width: 100%" @change="clickDev">
<el-option v-for="item in list" :key="item.id" :label="item.label" :value="item.id"</el-option>
</el-select>
clickDev(e) {
this.$nextTick(() => {
console.log(this.$refs.selection.selectedLabel)
})
},
2、select多级联动,选中前一个下拉框,清除后面下拉框之前选中的内容
在刚开始时想要清空后面选中的,我直接在前一个下拉框的change事件中,将下一个监听的value值赋值为空,虽然清空之前选中的内容,但是也导致点击选中数据,选中失败。
使用delete
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="id">
<el-select v-model="addData.idd" clearable placeholder="请选择" @change="devList">
<el-option v-for="item in list" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分组" prop="Group">
<el-select v-model="addData.Group" clearable placeholder="请选择"">
<el-option v-for="item in Groupdata" :key="item.id" :label="item.groupName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
devList(e) {
//删除选中的
delete this.addData.Group
},
select用在form表单中,并且这两个都进行规则校验,但是在删除后,点击提交时,其中一个没有进行选择,仍旧提交成功,所以我加上了下面的。
devList(e) {
//删除选中的
delete this.addData.pointGroup
//解决当第二个select为空值是,表单校验不生效问题
this.addData = { ...this.addData }
},