用字符串在vue中实现多选标签功能的方法(vue实现标签多选效果)

导语：用字符串在VUE中实现多选标签功能

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

一、数据库字段设计

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

二、定义标签字据字典

用通用的字典增加标签定义，这里标签只是用的数字，也可用字符。

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

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

//  1、编辑时，多选标签输入实现          <el-form-item label= prop=>  <el-select v-model= multiple placeholder=>    <el-option      v-for=      :key=      :label=      :value=>  </el-option></el-select></el-form-item>//2、组件构建时，将所有标签清单读出来备用    created() {      this.getList()      this.getDicts(&39;).then(response => {        this.fileLabelOptions = response.data      })    },      //3、构建修改窗口时，将字符转为数组      handleUpdate(row) {        this.reset()        const id = row.id || this.ids        //this.getTreeselect();        getScenicFile(id).then(response => {          this.form = response.data          this.form.label = this.form.label.split()        }       //4、数据保存提交时，转换字符      submitForm: function() {        this.$refs[&39;].validate(valid => {          if (valid) {            if (this.form.id != undefined) {              this.form.label = this.form.label.toString()              updateScenicFile(this.form).then(response => {                if (response.code === 200) {                  this.msgSuccess(&39;)                }              }//5、清单显示时，将代码转换为字符<el-table-column prop= label=  :formatter =  width=>                                          </el-table-column>         // 文件标签字典状态字典翻译      fileLabelFormat(row, column) {        let labelStr = &39;        if (row.label){          let tags = row.label.split()          for (let i = 0; i < tags.length; i++){            labelStr = labelStr + this.selectDictLabel(this.fileLabelOptions,tags[i]) +           }        }          return labelStr.substr(0,labelStr.length-1)      },

四、小结

用这个方法，后端少一个表，处理逻辑与编程要少很多，前端只增加少量代码。缺点是，后续做统计分析会不方便，后台如要做大量统计与分析，以及逻辑判断，还是需要分表实现。效果如下：

本文内容由快快网络小冰创作整理编辑！