vue element-ui 在表格 table 内展示标签 el-tag

最新推荐文章于 2026-05-04 07:08:35 发布

原创最新推荐文章于 2026-05-04 07:08:35 发布 · 2.1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何使用ElementUI中的el-table-column和template来根据不同业务类型（0为表单，1为推广，其他为警告）在表格列中显示不同标签。展示了如何在数据源(row.source)条件下动态改变标签样式。

     <el-table-column align="center" label="业务类型" prop="source">
        <template #default="{ row }">
            <div>
              <el-tag v-if="row.source == 0">表单</el-tag>
              <el-tag type="success" v-else-if="row.source == 1">推广</el-tag>
              <el-tag type="warning" v-else>其他</el-tag>
            </div>

        </template>
      </el-table-column>