Vxe UI 表格行编辑(默认不显示编辑框,点击后可编辑)

效果:

HTML代码:(type="integer"为这个,是限制只能输入正整数或负整数,英文和汉字自动转成0)

html 复制代码
<vxe-table
        show-overflow
        keep-source
        v-loading="loading"
        :data="ruleList"
        ref="Table"
        :row-config="{isHover: true}"
        height="100%"
        :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
      >
        
        <vxe-column type="seq" width="60" />
        <vxe-column
          title="排序"
          field="orderNum"
          :show-overflow-tooltip="true"
          :edit-render="{autofocus: '.myinput'}"
        >
          <template #edit="scope">
            <vxe-input
              type="integer"
              maxlength="30"
              class="myinput"
              v-model="scope.row.orderNum"
              placeholder="请输入"
              @input="updateRowStatus(scope)"
              clearable
            ></vxe-input>
          </template>
        </vxe-column>
</vxe-table>

方法:

表格上方的 更新排序 按钮的禁用状态(动态)判断

this.updateRecords里装的就是已编辑的行数据数组包对象结构,编辑了几个行,就有几个对象

javascript 复制代码
 // 排序处理
    updateRowStatus(params) {
      //获取表格中所有编辑过的行数据(就是所有带红色标志的)
      const $table = this.$refs.Table;
      if ($table) {
        this.updateRecords = $table.getUpdateRecords();
        if (this.updateRecords.length) {//可以控制表格上方排序按钮的disabled状态
          this.multiple = false;
        } else {
          this.multiple = true;
        }
      }
    },

排序按钮方法

javascript 复制代码
  handleStor() {
        this.$modal
          .confirm("是否确按输入顺序排序")
          .then(res => {
            //如果表格中有变更的行数据  就传入及接口  后端排序
            updateAttributeSort(this.updateRecords).then(res => {
              if (res.code === 200) {
                this.multiple = true;
                this.$modal.msgSuccess("更新排序完成");
                this.getList();
              } else {
                this.$modal.msgError(res.msg);
              }
            });
          })
          .catch(() => {});
    },
相关推荐
li35745 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj6 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel6 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel6 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵7 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld8 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷9 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军9 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离9 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库