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(() => {});
    },
相关推荐
前端太佬几秒前
从拧螺丝到造火箭:Git高阶玩家生存报告
前端·git·github
前端太佬几秒前
从青铜到塑料:Git逃难指南(附救命指令大全)
前端·git·github
格子惊蛰版2 分钟前
🪲正在开发后台管理系统的同学 UnoCSS 一定要用起来
前端·css
Postkarte不想说话4 分钟前
使用WebGL绘制一个三角形
前端
醋醋7 分钟前
vue2源码记录4
前端·vue.js
ccattempt8 分钟前
夯实基础-迭代器与生成器
前端
我怎么能这么帅气9 分钟前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
sky_smile_Allen9 分钟前
[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解
ui·unity·游戏引擎
迷路的小绅士21 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
前端snow29 分钟前
前端全栈第一课:用typeorm向数据库添加数据
前端