AVUE大表哥某行数据禁止编辑

port:6379

已于 2024-03-16 13:43:48 修改

阅读量534

点赞数 9

分类专栏：前端文章标签： vue.js javascript

于 2024-03-16 11:38:15 首次发布

本文链接：https://blog.csdn.net/qq_44890723/article/details/136758706

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

此处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>

大表哥“编辑”操作过程

表格数据行读取当前row数据，
赋值给绑定表单form，准备数据
子组件dialog打开，此时数据回显，用户可编辑
用户编辑更新，点击确定
confirm按钮调用当前update接口
刷新表格数据，重置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("当前行系统给出禁止手动修改");
          }
      },