element-ui switch 设置初始值的问题

Question

问题描述

在给switch设置初始值的时候，弹出框一显示，就会自动改变这个switch绑定的数据为 null

问题出现的环境背景及自己尝试过哪些方法

1、弹出框中嵌入表格，表格中每一行嵌入一个switch， 后端返回数据时，需要初始化弹出框中switch的显示情况
2、table 中的switch 只能有一个是处于开启的状态

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<el-dialog title="" :visible.sync="dialogVisible">
        <el-table :data="data">
            <el-table-column label="label">
                <template slot-scope="scope">
                    <el-switch v-model="tdIndex" :active-value='scope.$index' :inactive-value="null" active-color="#4C7CF3" inactive-color="#F0F2F5"></el-switch>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    

script

dialogShow(){ //  显示弹出框
    this.tdIndex = 1 // 后端返回的数据，在此模拟一下
    this.dialogVisible = true
}

你期待的结果是什么？实际看到的错误信息又是什么？

弹出弹出框，如何设置这个switch的初始值？

监听tdIndex 发现 刚开始是从 null 变成了 1， 但是在弹出框一弹出来的时候， 这个 tdIndex 又会自动从 1 变成null， 这个 要如何解决？

Answer 1

因为你表格绑定的数组如果长度超过1，就会导致有很多个switch绑定同一个tdIndex，这种情况肯定是需要你绑定表格数据每一项的某个字段。

更新：如果你表格长度为1，那么你给tdIndex赋值应为0，你绑定的active状态是index。

再更：如果你表格长度大于1，你给tdIndex赋值为一个固定的数字，因为所有的switch绑定的同一个字段，会导致有的switch active值并不是你赋值的值，所以tdIndex又会跳到inactive状态你所绑定的值，即null