向表格中插入一条数据，要求数据的某一项数值不可以重复

十连三金

已于 2024-03-04 11:04:30 修改

阅读量469

点赞数 4

文章标签：前端服务器 javascript

于 2024-03-04 11:03:39 首次发布

本文链接：https://blog.csdn.net/2301_78187511/article/details/136445213

版权

使用vxe-table的input直接在表格里插入一条数据，

html代码：

 <vxe-table :scroll-y="{ enabled: false }" border max-height="600" :data="tableData" keep-source ref="xTable" :edit-config="{ trigger: 'click', mode: 'row' }" @edit-closed="saveFun" align="center" @edit-actived="editActivedEvent">
        <vxe-table-column :edit-render="{ name: 'input', attrs: { disabled: nameDisabled } }" field="id" title="Id"></vxe-table-column>
        <vxe-table-column :edit-render="{ name: 'input' }" field="alNumber" title="编号" sortable></vxe-table-column>
      </vxe-table>

1.vxe-table的点击触发输入框

:edit-config="{ trigger: 'click', mode: 'row' }"

2. 保存输入框的数据的事件

 @edit-closed="saveFun"

JS代码：

 // 保存一条数据
    saveFun({ row, column }) {
      var alNumberNew = []
      var alNumber1 = null
      var alNumbers = false
      //遍历页面表格里的每一条数据里的编号，并且把编号数据加入到新的数组中
      this.tableData.forEach(item => {
        alNumberNew.push(item.alNumber)
      })
      // 筛留number类型的数据
      alNumberNew = alNumberNew.filter(Number) 
      // 对数组进行排序
      alNumberNew = alNumberNew.sort()    
      for (let i = 0; i < alNumberNew.length; i++) {
        // 把编号赋值给 alNumber1 
        alNumber1 = alNumberNew[1]
        // alNumberNew数组判断是否有重复值
        if (alNumberNew[i] != alNumberNew[i - 1]) {
          // 没有重复值
          alNumbers = true
        } else {
          alNumbers = false
          break
        }
      }
      // 如果编号为空
      if ( alNumber1 != null) {
        if ( alNumbers) {
        // 调动后端接口，实现保存单条数据的功能
          cacheVolumeWeight(row).then((response) => {
            // console.log("暂存成功！");
          }).catch(() => {});
        } else {
          //console.log("暂存失败！");
          this.$message.error("这个编号已经使用过了!");
          row.alNumber = null
        }
      } else {
        cacheVolumeWeight(row).then((response) => {
         //console.log("暂存成功");
        }).catch(() => {});
      }

    },