Element 表格内添加 Switch 开关

实现效果
在这里插入图片描述
主要就是使用了 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>

猜你喜欢

转载自blog.csdn.net/weixin_44640323/article/details/109054514
今日推荐