Element Ui 表格內編輯排序設置

實現效果：

代碼實現：

<!-- html -->
    <el-table-column prop="sort" label="排序" sortable width="72">
        <template slot-scope="{row,$index}">
          <div @dblclick="{{ chengenum($index) }}">
            <el-input v-if="editable[$index]" v-model.number="row.sort" size="small" @blur="sortBlue($index, row.sort)" @keyup.enter.native="sortBlue($index, row.sort)" />
            <span v-else>{{ row.sort }}</span>
          </div>
        </template>
      </el-table-column>

<!-- js -->
data:
 tableData: [], // 內容數據
 editable: [], // 編輯排序的表
     /**
     * 商品排序設置
     */
    chengenum(row) {
      this.editable[row] = true
      this.$set(this.editable, row, true)
    },
    // 失焦 完成
    sortBlue(row, val) {
      if ((/^\+?[1-9][0-9]*$/.test(val)) === false) {
        this.$message.warning('請填寫數字類型！')
        return false
      }
      this.$set(this.editable, row, false)
    },

其他內容代碼展示：