需求 如图合计行数据禁止编辑,其他数据行正常操作

此处VO该字段类型是String
禁止某行数据被编辑

前端

        <avue-crud :config="config"
                  ref="crud"
                  :option="option"
                  :query.sync="query"
                  :selectionList.sync="selectionList"
                  v-model="form"
                  :before-open="beforeOpen"
                  :listBefore="listBefore"
                  :listAfter="listAfter"
                  :addBefore="addBefore"
                  :addAfter="addAfter"
                  :updateBefore="updateBefore"
                  :updateAfter="updateAfter"
                  :delAfter="delAfter">
       <avue-crud>

大表哥“编辑”操作过程

  1. 表格数据行读取当前row数据,
  2. 赋值给绑定表单form,准备数据
  3. 子组件dialog打开,此时数据回显,用户可编辑
  4. 用户编辑更新,点击确定
  5. confirm按钮调用当前update接口
  6. 刷新表格数据,重置form

解决 判断当前数据行是否合计决定编辑弹窗是否被打开

avue的crud介绍

CRUD事件之beforeOpen解释
打开前的回调,会暂停Dialog的打开,done用于关闭Dialog,type为当前窗口的类型
type类型
view add edit

//弹出弹框之前
      beforeOpen(done, type) {
      if(type==='edit'){
        if (this.form.feedbackDate!=="合计") {
          setTimeout(() => {
            done()
          }, 500)
        }else
        //不打开提示
          this.$message.warning("当前行系统给出禁止手动修改");
          }
      },
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐