<a v-for="(dict,index) in button_list" :id="'factory'+index" :key="dict.value" class="sx_child" @click="update_queryDict(dict.value)" > 这是1段vue-element-admin代码,请将选项改为筛选框,update_queryDict能在选择值改变时执行,可清除选择
时间: 2023-07-06 21:03:20 浏览: 119
一个vue的入门dome(vue-element-admin),代码太老,改了配置,备份一下
可以将`<a>`标签替换为`<el-select>`,同时添加`clearable`属性,代码如下:
```html
<el-select v-model="selectedValue" :id="'factory'+index" :key="dict.value" class="sx_child" @change="update_queryDict" clearable>
<el-option v-for="(option, index) in dict.options" :key="index" :label="option.label" :value="option.value"></el-option>
</el-select>
```
然后在`data()`中添加`selectedValue`属性,`update_queryDict`方法中获取选中值时直接使用`this.selectedValue`就可以了,同时将该方法修改为:
```javascript
update_queryDict() {
// 清除选择
if (!this.selectedValue) {
this.queryDict[this.dictKey] = '';
return;
}
// 更新选择
this.queryDict[this.dictKey] = this.selectedValue;
},
```
这样就实现了选项改为筛选框,并且在选择值改变时执行`update_queryDict`方法,同时可清除选择的功能。
阅读全文