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

最新推荐文章于 2025-10-06 09:02:34 发布

原创

最新推荐文章于 2025-10-06 09:02:34 发布 · 954 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #前端 #vxe

效果:

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

<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="请输入