106.(前端)分类管理显示增加值tag——使用elementui中的动态编辑标签搭建结构

已于 2022-10-31 20:08:38 修改
阅读量1k 收藏 1
点赞数
分类专栏： 电子商城管理系统 文章标签： 前端 elementui vue 前端框架 javascript
于 2022-10-31 20:08:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63953077/article/details/127621739
版权

1.概述

在这里插入图片描述
官方网址

  1. 去到这里面选择需要用的代码粘贴
  2. data()返回值设置默认不显示inputVisible和空列表inputValue
  3. 添加点击函数showInput()：当点击编辑标签时，弹出一个input输入框
  4. 动态编辑标签存在于多行，存在同时被修改的问题（bug，使用第一个，第二个也被改）
  5. 解决方法: 在遍历时，不显示列表，并设置空列表；并且修改原先的绑定的Visibel和inputValue为查槽获取到的
  6. 实现触发动态编辑标签

2.效果展示

在这里插入图片描述

3.完整代码展示

<!-- 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>
                                        <!-- 动态编辑标签 -->
                                        <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
        }
    },
    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) {
            row.inputVisible = false;
            row.inputValue = '';
        }
    },
    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>
想成为数据分析师的开发工程师
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ElementUI Tag组件实现多标签生成的方法示例
10-16
在Vue.js框架中，ElementUI库提供了一个名为`Tag`的组件，用于创建标签功能，非常适合于文章分类、产品标签等场景。本文将详细介绍如何利用ElementUI的`Tag`组件实现多标签的生成方法。 首先，我们需要在Vue项目中...
tag-highlight.nvim：使用C编写的Neovim的语义突出显示和标签管理插件
02-04
tag-highlight.nvim 最初打算将其用作Neovim的简单标签突出显示插件，就像完全用C实现的Neotags（ ）一样。它将在项目（或单个文件）上运行ctags，扫描生成的标签，并根据该数据为Neovim创建突出显示定义。 此外，...
element UI——tag标签之showInput()函数在idea中报错
夏日漱石的博客
05-21 210
element UI——tag标签之showInput()函数在idea中报错
element ui Tag 动态添加标签
codercjw的博客
01-12 2431
element ui Tag 动态添加标签
vue3+ Element-Plus 点击勾选框往input中动态添加多个tag
最新发布
u010797364的博客
06-13 732
主要是这一块代码：v-for 遍历 uniqueArray数组 显示一个个tag，每一个tag后面有一个清除图标和removeTag事件。
vue+element 实现input内添加tag+tag的自定义变色
qq_44426236的博客
06-02 6050
vue+element 实现input内添加tag+tag的自定义变色
element-ui动态编辑标签
Zing_ing的博客
07-23 1168
通过v-for，根据description的内容进行渲染。当点击New Tag后，通过v-if和v-else来显示输入框，并去掉New Tag，在完成输入后由于绑定了失去焦点的事件和回车按下后的事件，会将新的内容放入数组中，通过v-for重新进行渲染，并且重置相关值以消失。点击叉叉，标签消失，点击New Tag，显示输入框，输入完成后生成标签，并且出现New Tag标签。关闭标签则是直接对数组进行剪切，删除某个值，再通过v-for重新进行渲染。
Elementui 动态tag的优化（在原有基础加上修改值，过滤重复项等）
ytyur6r的博客
12-17 2064
原生的elementui（2.13版本）动态编辑标签 只是动态的增加和删除，现在增加修改原有值和已经过滤重复和空格功能 下面的时原生的 链接https://element.eleme.cn/2.13/#/zh-CN/component/tag 我新加的的功能实现https://codepen.io/lisiwei1/pen/NWPbXvw 就是1.点击原有的标签进行修改，而且位置不会发...
vue 标签组件
WXF_Angular的博客
09-14 1340
基于谀基于http://element-cn.eleme.io/#/zh-CN/component/tag ，做一 ，做一个标签封装，双击可以修改标签内容。支持动态添加 1. 首先在项目中安装 element-ui；方法自行百度 2.实现效果，双击可以修改标签，可以删除标签，可以动态添加标签 3. 3.代码    下载地址 https://download.csdn.net/downloa...
element动态添加多条input框来添加数据
xiaoHelloWord的博客
10-30 6865
elementUI进行写的 <el-dialog title="添加" :visible.sync="addlistVisible" width="920px" :before-close="handleClose2"> <div>
网页模板——jQuery 标签云显示插件 Tag Cloud.zip
11-22
HTML代码可能会使用`<div>`标签来定义显示标签云的容器，并通过CSS类来应用样式。 2. **CSS 文件**：这个文件用于定义标签云的外观和布局。CSS（层叠样式表）可以控制标签的颜色、大小、字体、排列方式等视觉效果。...
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
10-17
在Vue Elementui中，Tag组件常用于展示简短的信息或者作为可关闭的标签，而与页面其他元素交互则涉及到事件监听、数据绑定和响应式更新等核心概念。本篇文章主要探讨了Tag与多选框（Checkbox Group）如何协同工作，...
前端展示中实现批量标签动态生成
葡萄城技术团队博客
10-26 833
比如我的标签宽度9厘米，我希望一行显示3个标签，那我就需要纸张的宽度至少是 9*3+左右页边距=29cm。注意：在设计的时候有一些尺寸高度，宽度微调，这块尽量使用属性设置的宽度高度调整固定值，不要手动拖动大小；要实现根据数据行数循环生成多个标签，就需要利用列表组件，根据列表组件的分组功能实现该需求。首先确定一个标签的大小，以及纸张的大小，确定一下一行可以显示几个标签；如果单个标签外层还想添加圆角边框，或者其它的样式，可以在外层嵌套容器。选择容器，然后设计圆角，以及边框粗细，颜色等等；
结合elementUI的Tag标签的动态编辑标签谈一下this.$nextTick([callback])
weixin_41924621的博客
02-15 1151
<el-input v-if="inputVisible" ref="saveTagInput" > </el-input> <el-button v-else @click="showInput">+ New Tag</el-button> showInput() { this.inputVisible = true; // this.$nextTick(_ => {
动态添加element标签，数据操作
weixin_44860425的博客
12-27 2345
我的问题每次点击 添加新值按钮就会添加一个下拉框 然后我对下拉框进行更改的时候 第一次没问题 但是如果我在选中的下拉框中从新选择 数据就会发生变化 会保留之前选中的值 这样是不对 通过索引 每次进行更改时都会把之前选中的给替换掉 非常重要：this.attr.splice(index,1,{name , id}) <el-dialog :title="visibleTitle" :v...
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
.伊泽瑞尔
10-20 4192
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
elementui tabs动态标签
weixin_42068855的博客
08-28 1756
tabs动态标签
107.(前端)分类管理增加值实现——使用elementui中的动态编辑标签发送请求
m0_63953077的博客
10-31 677
使用elementui中的动态编辑标签发送请求
element table动态添加标签
qq_32741973的博客
11-24 4514
原始显示是这样的： 加入要实现这样（添加一个图片图标），怎么实现呢？ 实现思路： 这里的hasimage是后台返回的参数，i是显示图标的标签
element-ui中的动态编辑标签 的 前端代码实现
05-26
element-ui中的动态编辑标签实现可以借助el-tag组件和el-input组件，具体实现步骤如下： 1.使用el-tag组件展示标签，并在标签上绑定点击事件，点击标签时触发编辑模式。 2.在编辑模式下，使用el-input组件替换原标签，编辑完成后再将el-input组件替换回el-tag组件。 3.在el-input组件上绑定blur事件，在失去焦点时触发编辑完成事件，并将编辑的内容传递给父组件进行保存。 以下是示例代码： ```html <template> <el-tag v-if="!isEdit" @click="handleEdit">{{ value }}</el-tag> <el-input v-else v-model="editValue" @blur="handleEditComplete"></el-input> </template> <script> export default { props: { value: { type: String, required: true } }, data() { return { isEdit: false, editValue: this.value } }, methods: { handleEdit() { this.isEdit = true; this.$nextTick(() => { this.$refs.input.focus(); }) }, handleEditComplete() { if (this.editValue !== this.value) { this.$emit('update:value', this.editValue); } this.isEdit = false; } } } </script> ``` 在父组件中使用该组件时，只需将需要编辑的标签内容通过value属性传递给该组件，并监听update:value事件获取编辑完成后的内容即可。 ```html <template> <dynamic-tag :value="tag" @update:value="handleTagUpdate" /> </template> <script> import DynamicTag from '@/components/DynamicTag.vue' export default { components: { DynamicTag }, data() { return { tag: '标签名' } }, methods: { handleTagUpdate(value) { this.tag = value; } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想成为数据分析师的开发工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值