ElementUI中Tag 标签实际使用

ElementUI中Tag 标签实际使用

概要

在实际开发中Tag标签的实际使用

整体架构流程

<el-table :data="tableData" border stripe>
	<el-table-column prop="categoryId" label="图书分类">
		<template slot-scope="scope">
			<el-tag v-if="scope.row.categoryId == '2'">计算机</el-tag>
        </template>
    </el-table-column>
    <el-table-column prop="bookName" label="图书名称"></el-table-column>
</el-table>

实现效果

技术名词解释

template

这是一个插槽，用于自定义表格单元格的内容。slot-scope=“scope” 指定了插槽作用域，可以在插槽内部使用 scope 对象来访问当前行的数据。

el-tag
计算机：这是一个 el-tag 组件，当当前行的 categoryId 值等于 ‘2’ 时，显示文本 “计算机”。这是通过 Vue.js 中的条件渲染指令 v-if 实现的。

技术细节

data() {
        return {
            //表格数据
            tableData:[],
            //列表查询
            listParm: {
                currentPage: 1,
                pageSize: 10,
                categoryId: '',
                bookName: '',
                bookPlaceNum: '',  //图书书架号
                bookAuther: ''
            }
        }
    },
    created(){
        this.getList()
    },
    methods: {
        //获取列表
        async getList(){
            let res=await getListApi(this.listParm);
            if(res && res.code==200){
                this.tableData=res.data.records;
            }
        },
        ......