Code directly
<el-table border :data="shopData" style="width: 100%" max-height="750">
<el-table-column label="">
<template slot-scope="scope">
<el-select placeholder="" v-model="scope.row.open" @change="optionsChange(scope.row.open)">
<el-option v-for="item in operateOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="">
<template slot-scope="scope">
<span>{{ scope.row.open }}</span>
</template>
</el-table-column>
</el-table>
// shopData
this.$ajax.post(url, data).then(res => {
this.shopData = res.data.data.rows
this.shopData.forEach(m => {
if (m.status === 0 || m.status === 2) {
m.open = 2
} else {
m.open = 1
}
})
}).catch(e => {
console.log(e)
})
//
optionsChange (item) {
console.log(item)
}
if I follow the above method, I choose the drop-down box in the change event to output the change but the view is not updated. If I make the following changes to the requested data, the view will also be updated. Why?
this.$ajax.post(url, data).then(res => {
res.data.data.rows.forEach(m => {
if (m.status === 0 || m.status === 2) {
m.open = 2
} else {
m.open = 1
}
})
this.shopData = res.data.data.rows
}).catch(e => {
console.log(e)
})
add operateOptions data
operateOptions: [
{
"id": 1,
"label": ""
},
{
"id": 2,
"label": ""
}
]