+new tag标签el-tag vue与elementui

+new tag

 

实现表格的每一个展开行都有一个+New Tag标签，官网代码如下：

<el-tag
  :key="tag"
  v-for="tag in dynamicTags"
  closable
  :disable-transitions="false"
  @close="handleClose(tag)">
  {{tag}}
</el-tag>
<el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  //按下enter键会触发方法
  @keyup.enter.native="handleInputConfirm"
  //失去焦点会触发方法
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
​
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
​
<script>
  export default {
    data() {
      return {
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: ''
      };
    },
    methods: {
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
​
      showInput() {
        this.inputVisible = true;
        // $nextTick方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码
        //让输入框自动获得焦点
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
​
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
  }
</script>

官网的是只有一个tag标签的例子，表格的展开行是多个tag标签，若如上写inputValue和inputVisible只在data中定义一次，则每个tag标签绑定的值都是同一个会互相受影响，现改成如下（在表格获取数据的时候定义的inputValue和inputVisible）：

<!-- 展开行 -->
            <el-table-column type="expand">
              <template slot-scope="scope">
                <!-- 循环渲染Tag标签 -->
                <el-tag v-for="(item,i) in scope.row.attr_vals"
                        :key="i"
                        closable>{{item}}</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"
                          @blur="handleInputConfirm">
                </el-input>
                <!-- 添加按钮 -->
                <el-button v-else
                           class="button-new-tag"
                           size="small"
                           @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
            </el-table-column>

// 获取表格数据
    async getParamsData () {
     
      const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, { params: { sel: this.activeName } })
​
      if (res.meta.status !== 200) {
        return this.$message.error('获取参数列表失败！')
      }
        //item的每一项都是一个tag标签，这里每一项都加了两个值inputValue和inputVisible
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        // 控制文本框的显示与隐藏
        item.inputVisible = false
        // 文本框中输入的值
        item.inputValue = ''
      })
    },
// 文本框失去焦点或摁下了Enter键都会触发
    handleInputConfirm () {
      console.log('ok')
    },
    // 点击按钮，展示文本输入框
    showInput (row) {
      row.inputVisible = true
    }

处理文本框失去焦点的时候出现按钮

// 文本框失去焦点或摁下了Enter键都会触发
    handleInputConfirm (row) {
      row.inputVisible = false
    },

处理用户文本框输入全是空格的内容标签

// 文本框失去焦点或摁下了Enter键都会触发
    handleInputConfirm (row) {
      // 用户输入全空格
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
        return
      }
      // 如果没有return，则证明输入的内容，需要做后续处理
    },

trim() 函数移除字符串两侧的空白字符或其他预定义字符。 功能除去字符串开头和末尾的空格或其他字符。