用字符串在VUE中实现多选标签功能-优快云博客

本文链接：https://blog.youkuaiyun.com/wujize/article/details/106181169

本文介绍了一种在Vue中用字符串处理多选标签的方法，避免了额外的数据表，通过数据库字段以逗号分隔的字符串存储标签。在前端，利用VUE将标签数组转换为字符串进行读取和保存，简化了后端处理，但可能不适用于复杂统计分析场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常可对数据对象用标签进行标记，以便实现精准分析推荐，主要有两种方式实现标签，一种是用另一个数据表，通过1对N关系，实现标签。这种实现方法比较复杂，对于后台功能处理要求多的可以用这种方法。对于有些标签，处理比较简单，可以用字符串保存标签的数组字符，使用时转换为数组，更新时转换为后台字符串，实现方法如下：

一、数据库字段设计

后台数据库用一个相对比较长的字符，Varchar(255)来保存选中的标签，采用“,”逗号进行分隔开，后台保存标签的代码。标签是利用通用数据字典进行定义。

二、定义标签字据字典

用通用的字典增加标签定义，这里标签只是用的数字，也可用字符。
在这里插入图片描述

三、读取与存储存数据转换

在VUE前端，标签输入是采用多选框，多选框传递给后台的是数组，因此必须在读取数据和保存数据时，必须进行转换。读取时，将字符用split分隔为数组，保存时用tostring转换为字符。

1、编辑时，多选标签输入实现

<el-form-item label="文件标签" prop="label">
  <el-select v-model="form.label" multiple placeholder="请选择文件标签">
    <el-option
      v-for="lab in fileLabelOptions"
      :key="lab.dictValue"
      :label="lab.dictLabel"
      :value="lab.dictValue">
  </el-option>
</el-