Element Ui 表格内编辑排序设置

原创于 2020-06-27 16:26:49 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

Element UI 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用 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)
    },

其他内容代码展示：