Element-Plus-（六）Element-Plus实现单独控制switch开关

本文最后更新于：March 12, 2022 am

Element Plus 基于 Vue 3，面向设计师和开发者的组件库。Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，提供了配套设计资源，帮助网站快速成型。

目录

表格代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-table-column label="物品状态" width="150" align="center">
    <template v-slot="scope">
        <el-switch
                   v-model="scope.row.isShow"
                   class="ml-2"
                   inline-prompt
                   active-color="#13ce66"
                   inactive-color="#ff4949"
                   active-text="Y"
                   inactive-text="N"
                   @change="rowKG(scope.row)" 
                   />
    </template>
</el-table-column>

数据数组

1
2
3
4
5
6
7
8
9
tableData: [{
    id:123,
    name:"sdfsdf",
    isShow: true //控制开关
},{
    id:12323423,
    name:"sdfsdf",
    isShow: false
}],

点击触发函数

1
2
3
4
5
rowKG(row){
    console.log(row) //当前行所有信息
    console.log(row.id) //当前行里面的具体信息，下同
    console.log(row.name)
},