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(() => {});
    },
相关推荐
灿灿121387 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴25 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack43 分钟前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css