1.流程

1.1静态参数

1. 先添加展开列
2. 通过resp.data去找不同类型的具体值：存放在val中
3. 利用查槽去获取当前列类型的具体值
4. 把以上的操作复制到动态参数中

<!-- 展开列 -->
<el-table-column type="expand"><!-- 使用查槽来获取值 --><template slot-scope="scope"><el-tag>{{ scope.row.val }}</el-tag></template>
</el-table-column>

1.2动态参数

此时发现，所有的值都存放到一起了。一个属性有多个值

1. 通过在getAttribute()把val转换成一个列表，用逗号隔开
2. 在中使用v-for遍历列表
3. 分隔开tag标签

1.3bug处理

当我们使用 ’ ‘.split(’,') 时候，会返回一个空列表，如果这样的话，我们的动态属性中就会返回一个空标签
使用三问运算符，去控制如果没有值就返回空

<!-- 静态 --><el-tab-pane label="静态参数" name="static"><el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">增加参数</el-button><el-table :data="staticAttr"><!-- 展开列 --><el-table-column type="expand"><!-- 使用查槽来获取值 --><template slot-scope="scope"><el-tag>{{ scope.row.val }}</el-tag></template></el-table-column><!-- 索引列 --><el-table-column type="index"></el-table-column><el-table-column label="参数名称" prop="name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="success" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></template></el-table-column></el-table></el-tab-pane><!-- 动态 --><el-tab-pane label="动态参数" name="dynamic"><el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">增加参数</el-button><el-table :data="dynamicAttr"><!-- 展开列 --><el-table-column type="expand"><!-- 使用查槽来获取值 --><template slot-scope="scope"><el-tag v-for="(v,i) in scope.row.val" :key="i">{{ v }}</el-tag></template></el-table-column><!-- 索引列 --><el-table-column type="index"></el-table-column><el-table-column label="参数名称" prop="name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="success" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></template></el-table-column></el-table></el-tab-pane>
async getAttribute() {const { data: resp } = await this.$axios.get('/api/category/attr_list', {params: { cid: this.selectKeys[2], _type: this.activeName}})if (resp.status !== 200) return this.$msg.error(resp.msg)console.log(resp.data);if (this.activeName === 'static'){this.staticAttr = resp.datathis.staticFlag = false}else{resp.data.forEach( item => {item.val = item.val? item.val.split(','):[]})this.dynamicAttr = resp.datathis.dynamicFlag = false}},
<style lang="less" scoped>.el-tag{margin:5px}
</style>

2.完整代码

<!-- src/components/goods/Attribute.vue -->
<template><div><!-- 面包屑 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>分类管理</el-breadcrumb-item></el-breadcrumb><!-- 具体显示内容的地方 --><el-card><!-- 提示信息 --><el-alert title="注意：只允许为第三级的分类设置相关参数！！！" type="warning" close-text="知道了"></el-alert><el-row><el-col><span>选择商品分类：</span><el-cascader v-model="selectKeys":options="cateIdList":props="{ expandTrigger: 'hover', label:'name', value:'id'}" clearable separator=" > "@change="changeSelector"></el-cascader></el-col></el-row><!-- Tags展示内容 --><el-row><el-col><el-tabs v-model="activeName" @tab-click="handleClick"><!-- 静态 --><el-tab-pane label="静态参数" name="static"><el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">增加参数</el-button><el-table :data="staticAttr"><!-- 展开列 --><el-table-column type="expand"><!-- 使用查槽来获取值 --><template slot-scope="scope"><el-tag>{{ scope.row.val }}</el-tag></template></el-table-column><!-- 索引列 --><el-table-column type="index"></el-table-column><el-table-column label="参数名称" prop="name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="success" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></template></el-table-column></el-table></el-tab-pane><!-- 动态 --><el-tab-pane label="动态参数" name="dynamic"><el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">增加参数</el-button><el-table :data="dynamicAttr"><!-- 展开列 --><el-table-column type="expand"><!-- 使用查槽来获取值 --><template slot-scope="scope"><el-tag v-for="(v,i) in scope.row.val" :key="i">{{ v }}</el-tag></template></el-table-column><!-- 索引列 --><el-table-column type="index"></el-table-column><el-table-column label="参数名称" prop="name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="success" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></template></el-table-column></el-table></el-tab-pane></el-tabs></el-col></el-row></el-card><el-dialog :title="'添加'+titleText" :visible.sync="addDialogVisible" width="30%" @close="addDialogClose"><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px"><el-form-item :label="titleText" prop="name"><el-input v-model="addForm.name"></el-input></el-form-item><el-form-item><el-button type="primary" @click="addAttr">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>export default{data() {return {cateIdList: [],selectKeys:[],activeName: 'static',staticAttr:[],dynamicAttr:[],dynamicFlag: false,staticFlag: false,addDialogVisible: false,addForm: {name: ''},addFormRules: {name: [{ required: true, message: '请填写参数名称', tigger:'blur'}]}}},created() {this.getCateIDList()},methods:{// 获取整个列表async getCateIDList(){const { data: resp } = await this.$axios.get('/api/category_list')this.cateIdList = resp.data.data},// 发送变化时触发此函数changeSelector(){if (this.selectKeys.length < 3){this.staticAttr = []this.dynamicAttr = []return}// console.log(this.selectKeys);this.dynamicFlag = truethis.staticFlag = truethis.getAttribute()},handleClick(tab, event) {// console.log(tab, event);if (!this.staticFlag && this.activeName === 'static') returnif (!this.dynamicFlag && this.activeName === 'dynamic') returnif (this.selectKeys.length < 3) return// console.log(this.selectKeys[2]);console.log(this.activeName);this.getAttribute()},// 获取列表数据async getAttribute() {const { data: resp } = await this.$axios.get('/api/category/attr_list', {params: { cid: this.selectKeys[2], _type: this.activeName}})if (resp.status !== 200) return this.$msg.error(resp.msg)console.log(resp.data);if (this.activeName === 'static'){this.staticAttr = resp.datathis.staticFlag = false}else{resp.data.forEach( item => {item.val = item.val? item.val.split(','):[]})this.dynamicAttr = resp.datathis.dynamicFlag = false}},addDialogClose() {this.$refs.addFormRef.resetFields()},// 添加参数async addAttr() {// 验证内容是否满足rulethis.$refs.addFormRef.validate(async valid =>{if (!valid) return// // 测试：获取表单内容// console.log(this.addForm.name);// // 测试：获取表单数据的type// console.log(this.activeName);// // 测试：获取表单数据的id// console.log(this.selectKeys[2]);// 发送请求const { data: resp } = await this.$axios.post('/api/category/attribute',this.$qs.stringify({cid: this.selectKeys[2],_type: this.activeName,name: this.addForm.name}))if (resp.status !== 200 ) return this.$msg.error(resp.msg)this.$msg.success(resp.msg)this.getAttribute()this.addDialogVisible = false})}},computed:{titleText(){if (this.activeName === 'static') return '静态参数'else return '动态参数'},isBtnDisabled(){if (this.selectKeys.length >= 3){return false}else{return true}}}
}
</script><style lang="less" scoped>.el-tabs{margin-top: 5px;}.el-cascader{width: 300px;margin-top: 10px;}.el-tag{margin:5px}
</style>