element ui 表单里的下拉 选择后数据变化 如何让页面也跟着变化

Question

<el-form ref="tableInfo" :model="tableInfo">
    <el-table-column :data="tableInfo.tableData" prop="address" label="商品品牌">
        <template>
            <el-form-item prop="value3">
                <el-select v-model="value3">
                    <el-option v-for="(item,i) in tableInfo.options3" :key="i" :label="item.label" :value="item.label"></el-option>
                </el-select>
            </el-form-item>
        </template>
    </el-table-column>
</el-form>

data () {
    return {
        tableInfo:{
            options3: [
                {
                    label: 'meat'
                }, 
                {
                    label: 'drink'
                }, 
            ],
            tableData: [
                {
                    num: '1',
                    name: '王小虎',
                    brand:'',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
            ],
        },
        value3:'',
    }

把el table 标签去掉就可以选择上下拉框的内容 加上table 就不显示了 但是数据跟着变化

在change事件里 this.$forceUpdate() select标签下使用过强制刷新了 也是没反应

Answer 1

这里只是视图没更新，但是我们数据是变化了的
投机取巧的解决：

<el-select  @change="change" ref="select"></el-select> // 添加事件 绑定ref

change(val){
    this.$refs.select.selected.currentLabel = val
}

Answer 2

你好，请问这个问题解决了吗？