108.(前端)分类管理删除值实现——¶elementui可移除标签

1.概述

使用element-ui可移除标签：设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置disable-transitions属性，它接受一个Boolean，true 为关闭。

2.对动态参数添加可移除标签

1. 添加属性closable
2. 创建一个点击函数，splice()删除元素
3. 发送请求修改数据

3.代码展示

<el-tag closable @click="removeTag(scope.row,i)" v-for="(v,i) in scope.row.val" :key="i">{{ v }}</el-tag>
 // 发送请求：用于修改当前的内容，也可以理解成保存
        async saveAttribute(row) {
            const { data: resp } = await this.$axios.put(
                '/api/category/attribute',
                this.$qs.stringify(
                    { id: row.id, name: row.name, cid: row.cid, val: row.val.join(',') }
                )
            )
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.success(resp.msg)
        },
        // 删除元素
        removeTag(row, i){
            console.log(row.val);
            console.log(i);
            // js中内置的删除函数
            row.val.splice(i, 1)
            console.log(row.val);
            console.log(i);
            this.saveAttribute(row)
        }

4.效果展示

5.完整代码展示

<!-- 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 closable @click="removeTag(scope.row,i)" v-for="(v,i) in scope.row.val" :key="i">{{ v }}</el-tag>
                                        <!-- 动态编辑标签 -->
                                        <el-input 
                                        class="input-new-tag" 
                                        v-if="scope.row.inputVisible" 
                                        v-model="scope.row.inputValue" 
                                        ref="saveTagInput" 
                                        size="small"
                                        @keyup.enter.native="handleInputConfirm(scope.row)"
                                        @blur="handleInputConfirm(scope.row)">
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">
                                            + New Tag
                                        </el-button>
                                    </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'}]
            },
            inputValue: [],
            inputVisible: false,
            inputValue1: [],
            inputVisible1: false
        }
    },
    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 = true
            this.staticFlag = true
            this.getAttribute()
        },
        handleClick(tab, event) {
            // console.log(tab, event);
            
            if (!this.staticFlag && this.activeName === 'static') return
            if (!this.dynamicFlag && this.activeName === 'dynamic') return
            if (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.data
                this.staticFlag = false
            }else{
                resp.data.forEach( item => {
                    item.val = item.val? item.val.split(','):[]
                    item.inputValue='',
                    item.inputVisible=false
                })
                this.dynamicAttr = resp.data
                this.dynamicFlag = false
            }
        },
        addDialogClose() {
            this.$refs.addFormRef.resetFields()
        },
        // 添加参数
        async addAttr() {
            // 验证内容是否满足rule
            this.$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

            })
        },
        // 动态编辑标签,点击函数
        showInput(row) {
            row.inputVisible = true,
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
        },
        // 触发函数
        handleInputConfirm(row) {
            // 判断输入框是否存在值
            if (row.inputValue.trim().length === 0){
                row.inputVisible = false
                row.inputValue = ''
            }else{
                // 添加到row的值val中，并保存
                row.val.push(row.inputValue.trim())
                row.inputVisible = false
                row.inputValue = ''
                this.saveAttribute(row)
            }
        },
        // 发送请求：用于修改当前的内容，也可以理解成保存
        async saveAttribute(row) {
            const { data: resp } = await this.$axios.put(
                '/api/category/attribute',
                this.$qs.stringify(
                    { id: row.id, name: row.name, cid: row.cid, val: row.val.join(',') }
                )
            )
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.success(resp.msg)
        },
        // 删除元素
        removeTag(row, i){
            console.log(row.val);
            console.log(i);
            // js中内置的删除函数
            row.val.splice(i, 1)
            console.log(row.val);
            console.log(i);
            this.saveAttribute(row)
        }
    },
    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
    }
    .input-new-tag{
        width: 100px;
    }
</style>