table中的el-select选择框,当切换选项时弹出提示框,点击确认切换选项,取消则不改变数据
需求:如图,状态选择框切换选项时,弹出提示框;点击确定,发送请求更改状态;点击取消,选择框显示原来选项。
思路:由于element-ui的el-select选择后只能添加change事件,但是change事件一旦触发,选择框中的值已经改变。正常的方法是监听select中的v-model绑定的值(定义一个初始值,)。如下代码:
<template>
<div class="approvalStage">
<el-select v-model="storeLocation" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-dialog
:visible.sync="changeStoreVisible"
class="taskDialog delete-shortcut-dialog"
width="420px"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
>
<template slot="title">
<span style="font-size:16px;font-weight:400;">
<i
class="iconfont icon-warning"
style="font-size:20px;color:rgba(23,155,255,1);margin-right:5px;"
></i>是否改变选项值
</span>
</template>
<p class="tips-text" style="height: 38px;">
<span style="color:red;font-size:14px;">改变选项值,</span>是否继续?
</p>
<div slot="footer" class="dialog-footer">
<el-button @click="changeStoreCancle">取 消</el-button>
<el-button type="primary" @click="changeStoreForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
],
storeLocation: '初始值',
changeStoreVisible: false,
beforeStorageValue: '', // 中介值
afterStorageValue: ''
}
},
watch: {
storeLocation: {
immediate: true,
handler(val, old) {
console.log('val:', val, 'old:', old)
if (this.beforeStorageValue) {
console.log(
'val:',
val,
'old:',
old,
'this.beforeStorageValue',
this.beforeStorageValue
)
if (val !== this.beforeStorageValue) {
this.changeStoreVisible = true
}
}
}
}
},
mounted() {
this.beforeStorageValue = this.storeLocation
},
methods: {
changeStoreCancle() {
this.storeLocation = this.beforeStorageValue
this.changeStoreVisible = false
},
changeStoreForm() {
console.log(this.storeLocation)
this.beforeStorageValue = this.storeLocation // 确定更改后使中介值等于目前框内的值,这样下次确定改变取消的话,可以回到现在的值
this.changeStoreVisible = false
}
}
}
</script>
<style lang="scss" scoped>
.approvalStage{
background-color: #fff;
padding: 20px;
padding-bottom: 40px;
border-radius: 4px;
}
</style>
此次项目里的选项是在表格内后台数据渲染而来,v-model无法设定一个初始值;但select提供了visible-change事件,官方文档描述:下拉框出现/隐藏时触发 出现则为 true,隐藏则为 false;利用此事件在点击下拉框,出现下拉框时把原来现实的值储存(baseValue)。
select框值改变时提示框: