美文网首页
笔记 || ele+vue3 表格1

笔记 || ele+vue3 表格1

作者: hdormy | 来源:发表于2023-02-15 11:40 被阅读0次

表格中嵌套switch开关:

根据字段:switch_status 的值,生成开关样式

以下办法只达到解决的效果,不知道还有没有更优的效果

利用v-if,在列上做判断,如果是switch_status,则生成开关,否则直接输出,代码如下:

<el-table :data="tableData" style="width:100%" row-key="id" id="tableId">

        <el-table-column v-for="item in tableTitleList" :label="$t(item)" :key="item.prop" prop="item">

            <template #default="scope" v-if="item == 'switch_status'">

                <el-switch v-if="scope.row.switch_status!==null" style="display: block" v-model="scope.row.switch_status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#f0f0f0">

                </el-switch>

            </template>

            <template #default="scope" v-else>

                <div v-if="scope.row[item]==null">暂无数据</div>

                <div v-if="scope.row[item]!==null">{{scope.row[item]}}</div>

            </template>

        </el-table-column>

    </el-table>

相关文章

网友评论

      本文标题:笔记 || ele+vue3 表格1

      本文链接:https://www.haomeiwen.com/subject/groykdtx.html