AVUE 点击编辑按钮拉起弹窗前增加自己的操作

1.自定义编辑按钮事件

<avue-crud
          ref="crud"
          :data="data"
          v-model="form"
          :option="option"
          :page.sync="page"
          @on-load="getList"
          @refresh-change="refreshChange"
          @search-reset="from = {}"
          @search-change="searchChange"
          @row-update="rowUpdate"
          @row-save="rowSave"
          @row-del="rowDel"
      >
        <template slot="menuLeft">
          <el-tag type="danger" ><b> 注:我太难了</b></el-tag>
        </template>
        
        <template slot-scope="scope"
                  slot="menu">
          <el-button size="small"
                     type="success"
                     icon="el-icon-edit"
                     @click="updateButtonClick(scope.row,scope.index)">编 辑
          </el-button>
          <el-button size="small"
                     type="danger"
                     icon="el-icon-delete-solid"
                     @click="$refs.crud.rowDel(scope.row,scope.index);">删 除
          </el-button>
        </template>

      </avue-crud>

2.在自定义的编辑按钮点击事件里,处理逻辑,最后拉起编辑页面

  methods: {
    //跳转
    updateButtonClick(row,index) {
      //↓↓↓此处写自己的逻辑

      //↑↑↑此处写自己的逻辑
      console.log(row);
      this.$refs.crud.rowEdit(row, index);
    }
  },

猜你喜欢

转载自blog.csdn.net/qq_37928038/article/details/125660020