Element 表格内添加 Switch 开关

我不是女神ヾ 2022-12-14 12:20 443阅读 0赞

实现效果  
![在这里插入图片描述][20201013162214800.png_pic_center]  
主要就是使用了 slot-scope=“scope” 给开关的 v-model 绑定的值为当前行的 scope.row.qStatus

<template>
        <el-table @row-click="rowShowInput" style="margin-top: 10px"  height="300px" :data="detectionData" border stripe size="small" :header-cell-style="{background:'#ECF5FF',color:'#606266',fontWeight:'bold',align:'center'}" highlight-current-row>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="proBatchCode" width="120" label="产品" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pName" width="150px" label="名称" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="model" width="120px" label="型号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="amount" label="数量" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="amount" label="是否合格" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.qStatus"
                            active-color="#5B7BFA"
                            inactive-color="#dadde5">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
    </template>

[20201013162214800.png_pic_center]: /images/20221123/980b4985422c4f0fb621eb008dabc149.png

发表评论取消回复

表情：

评论列表（有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

相关中级控件——switch开关——系统控件switch开关

![c754c139433a44408d78efc5462e4390.png][] ![a9e1b2236a0c224d0281f2f30bccfed4.png][] ==

矫情吗；*/ 2023年09月28日 14:26/ 0 赞/ 348 阅读

相关 Element的Switch开关

<el-table-column prop="onlineStatus" label="是否上线" align="center" width="95" fixed="r

男娘i/ 2022年12月30日 14:00/ 0 赞/ 165 阅读

相关 Element 表格内添加 Switch 开关

实现效果 ![在这里插入图片描述][20201013162214800.png_pic_center] 主要就是使用了 slot-scope=“scope” 给开关的

我不是女神ヾ/ 2022年12月14日 12:20/ 0 赞/ 444 阅读

相关 vue+el-switch开关的使用

重点！！注意change事件的 $event 参数！！是开关变化的新状态值！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

我会带着你远行/ 2022年10月14日 12:55/ 0 赞/ 321 阅读

相关纯CSS样式写switch开关

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

喜欢ヅ旅行/ 2022年06月07日 11:59/ 0 赞/ 191 阅读

相关 iview table render集成switch开关

iview table render集成switch开关今天想要分享的是iview table render集成switch开关修改table表格的值，看文档

曾经终败给现在/ 2022年06月02日 03:50/ 0 赞/ 360 阅读

相关 layui中的switch开关

效果如下图： ![70][] 显然这个插件是一个checkbox，只是在layui中封装了。所以layui的js和css是必不可少的。 Html代码： <

我不是女神ヾ/ 2022年05月21日 10:26/ 0 赞/ 280 阅读

相关 css3 switch开关的实现

<input type="checkbox" id="switch" /><label for="switch">Toggle</label> inp

逃离我推掉我的手/ 2022年05月14日 04:53/ 0 赞/ 162 阅读

相关 Form-switch开关

<e

╰+哭是因爲堅強的太久メ/ 2022年03月30日 08:18/ 0 赞/ 265 阅读

相关 CSS做个Switch开关

Switch开关：　　![1041634-20170228144156001-1353181817.png][] 　　![1041634-2017022814420239

妖狐艹你老母/ 2021年09月15日 15:10/ 0 赞/ 309 阅读