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

一、数据库字段设计

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

二、定义标签字据字典

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

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

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

//  1、编辑时，多选标签输入实现          //2、组件构建时，将所有标签清单读出来备用    created() {      this.getList()      this.getDicts('scenic_file_label').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['form'].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('修改成功')                }              }//5、清单显示时，将代码转换为字符         // 文件标签字典状态字典翻译      fileLabelFormat(row, column) {        let labelStr = ''        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)      },

四、小结

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