when using vue+element, v-model binds an object attribute to the select element value. When you switch the select option, the bound object value changes, but the interface display remains unchanged, and it is still the option name corresponding to the original value.
<template>
<div class="bg-hks-container">
<div class="bg-hks-conditionbox">
<el-row :gutter="10">
<el-col
class="bg-hks-condition-col"
:xs="24" :sm="12" :md="8" :lg="6" :xl="4"
v-for="item in conditionitems"
:key="item.property"
>
<div class="bg-hks-condition-itembox">
<div class="bg-hks-condition-itemname">{{item.name}}:</div>
<el-date-picker
size="mini"
:placeholder="item.placeholder"
:type="item.type"
v-model="conditions[item.property]"
v-if="item.type==="date"||item.type==="datetime""
>
</el-date-picker>
<el-input
size="mini"
:placeholder="item.placeholder"
:type="item.type"
v-model="conditions[item.property]"
v-if="item.type==="text""
>
</el-input>
<el-select
size="mini"
:placeholder="item.placeholder"
:type="item.type"
v-model="conditions[item.property]"
v-if="item.type==="select""
>
<el-option
v-for="opt in item.options"
:key="opt.value"
:label="opt.name"
:value="opt.value">
</el-option>
</el-select>
</div>
</el-col>
</el-row>
</div>
<table id="dataTable"></table>
</div>
</template>
<script>
export default {
data(){
return {
apis:{},
conditions:{},
conditionitems:[]
}
},
created(){
this.initDataForCreate();
},
methods:{
initDataForCreate(){
this.apis = this.$store.state.apis;
this.initCondition();
},
initCondition(){
if(this.apis&&this.apis.hotkeycondition){
this.$http.get(this.apis.hotkeycondition)
.then(response=>{
if(response&&response.data){
this.conditionitems = response.data;
}else{
throw "ITEM";
}
})
.catch(error=>{
console.error(error);
});
}else{
console.error("")
}
}
},
watch:{
conditionitems(){
if(this.conditionitems.length>0){
this.conditionitems.forEach(item=>{
this.conditions[item.property] = item.default;
if(item.type==="date"||item.type==="datetime"){
let date = new Date(item.default);
this.conditions[item.property] = date.toString()==="Invalid Date"
? new Date()
: date;
}
})
}
}
}
}
</script>
<style lang="less" scoped>