vue - element-ui -＞ el-tag 标签状态

新老农

已于 2022-04-29 17:45:18 修改

阅读量4k

点赞数

文章标签： vue

于 2022-04-29 15:21:40 首次发布

懒虫

本文链接：https://blog.csdn.net/xcbzsy/article/details/124496537

版权

本文介绍了如何在前端表格中高效地使用`el-tag`组件展示状态信息和自定义标签。通过简写方式减少代码冗余，如使用三元运算符根据`scope.row.status`动态设置标签颜色和文字，以及利用`v-for`遍历`menuCateMap`数据来显示不同类型的标签。此外，还展示了在表格列中如何根据`is_require`属性展示'是'或'否'的标签。

摘要由CSDN通过智能技术生成

 <el-tag v-if=" scope.row.status===2" type="danger">禁用</el-tag>
 <el-tag v-if=" scope.row.status===1" type="success">启用</el-tag>

两个的简写

 <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{scope.row.status === 1 ? '启用':'禁用'}}</el-tag>

多个的简写

 <el-tag v-for="(item,index) in menuCateMap" v-show="scope.row.type == item.value" :key="index" :type="item.cssName">
              {{item.label}}
</el-tag>

 menuCateMap: [
        { label: '菜单', value: 1, cssName: 'success' },
        { label: '目录', value: 2, cssName: 'primary' },
        { label: '按钮', value: 3, cssName: 'danger' },
        { label: '顶级菜单', value: 4, cssName: 'warning' },
        { label: '字段', value: 5, cssName: 'info' },
      ]

在这里插入图片描述

      <div class="col-md-9" style="padding-top: 10px;">
                <el-table
                    :data="tablets"
                    height="700"
                    border
                    stripe
                    style="width: 100%;margin-top: 38px;">
                       
                    <el-table-column
                        label="客户部门"
                        width="160">
                        <template slot-scope="scope">
                            <template v-for="tag in scope.row.client_depart">
                                <el-tag :key="tag.name">
                                    ${tag.name}
                                </el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    

                    <el-table-column
                        prop="is_require"
                        label="是否必选"
                        width="80"
                        filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.is_require == 0">否</el-tag>
                            <el-tag v-else>是</el-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column
                        label="AAA"
                        width="300">
                        <template slot-scope="scope">
                            <el-tag
                                v-for="tag in tags"
                                :key="tag.name"
                                :type="tag.type">
                                <span>${tag.name}</span>
                            </el-tag>
                        </template>
                    </el-table-column>

                     
                </el-table>
            </div>

在这里插入图片描述

 delimiters: ['${', '}'],

在这里插入图片描述

<el-table-column
     label="AAA"
     width="300">
     <template slot-scope="scope">
         <el-tag
             v-for="tag in tags"
             :key="tag.name"
             :type="tag.type">
             <span>${tag.name}</span>
         </el-tag>
     </template>
 </el-table-column>

    var Main = {
        delimiters: ['${', '}'],
        data() {
            return {
                tags: [
                    { name: '标签一', type: 'success' },
                    { name: '标签二', type: 'success' },
                    { name: '标签三', type: 'success' },
                    { name: '标签四', type: 'success' },
                    { name: '标签五', type: 'success' }
                ],
            }
        }
     },