Element 中switch绑定值为0和1

越陌度阡

发布于 2020-12-22 15:40:27

1.6K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

switch开关经常用在是否启用的场合，但是switch默认绑定值的类型是布尔类型，即true和false，在实际的项目中，后端的接口都会用0和1来代替，如何将数值与状态进行关联呢？

我们可以用active-value绑定要启用状态的值，用inactive-value绑定禁用状态的值，这两个值默认对应的是字符串类型。

<el-table-column label="是否启用">
    <template slot-scope="obj">
        <el-switch
            v-model="obj.row.status"
            active-color="#13ce66"
            inactive-color="#cccccc"
            active-value="1"
            inactive-value="0"
            @change="changeStatus(obj.row.id)"
        >
        </el-switch>
    </template>
</el-table-column>

如果接口返回的status是数字类型的，需要加上动态绑定，代码如下：

<el-table-column label="是否启用">
    <template slot-scope="obj">
        <el-switch
            v-model="obj.row.status"
            active-color="#13ce66"
            inactive-color="#cccccc"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(obj.row.id)"
        >
        </el-switch>
    </template>
</el-table-column>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/12/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

status