笔记 || ele+vue3 表格1

表格中嵌套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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容