最终要实现的效果

双击某一行，出现下拉框进行编辑，然后保存

过程 

1.在avue框架上添加@row-dblclick每一行的双击事件

2.在要编辑的option的column列添加change()事件，change事件中执行的是rowUpdate事件

代码

<template>
  <basic-container>
    <avue-crud ref="crud"
               :data="data"
               :option="option"
                @cell-dblclick="handleRowClick"
               @on-load="onLoad">
    </avue-crud>
  </basic-container>
</template>

<script>
import {DICT,tree_stuff} from "@/util/mixins";
import {list, update} from "@/api/report/project";

export default {
  data() {
    return {
      query: {},
      option: {
        tip: false,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        menu: false,
        searchMenuSpan: 4,
        column: [
          {label: "项目状态", prop: "isArchived_eq", type: "select", dicData: DICT.archivedType, search: true, searchValue:DICT.archivedType[0].label, searchSpan: 4, searchPlaceholder: "是否归档", showColumn: false, hide: true},
          {label: "需求来源", prop: "requiredBUType_eq", type: "select", dicData: DICT.requiredBUType, search: true, searchSpan: 6, searchPlaceholder: "需求来源", filterable: true,showColumn: false, hide: true},
          {label: "费用列支", prop: "chargeType_eq", type: "select", dicData: DICT.chargeType, cell: true, search: true,width: 110, placeholder: "费用列支",  showColumn: false, hide: true, display: false},

          {label: "项目名称", prop: "projectName", minWidth: 260, searchPlaceholder: "项目名称"},
          {
            label: "费用列支", prop: "chargeType", type: "select", dicData: DICT.chargeType, cell: true, width: 110, placeholder: "请选择",
            change: ({row, value}) => {
              if (!value) return;
              this.rowUpdate(row);      //值发生变化时添加change事件，然后执行rowUpdate事件
            }
          },
          {
            label: "项目负责人", prop: "personId", type: "select", dicData: tree_stuff, filterable: true, cell: true, width: 220, placeholder: "请选择",
            change: ({row, value}) => {
              if (!value) return;
              this.rowUpdate(row);     //值发生变化时添加change事件，然后执行rowUpdate事件
            }
          },
          {label: "需求申请所属事业部", prop: "requireBU", width: 220,overHidden: true},
          {label: "需求总数", prop: "requireNum", width: 90},
          {label: "产品设计", prop: "productNum", width: 90},
          {label: "任务统计", prop: "task", width: 100, slot: true},
          {label: "七日新增", prop: "addNum", width: 90},
          {label: "七日完成", prop: "doneNum", width: 90},
          {label: "投入资源", prop: "resNum", width: 100, slot: true},
          {label: "发生费用", prop: "usedAmount", width: 120},
          {label: "预算总计", prop: "reckonAmount", width: 120},
          {label: "预估剩余预算", prop: "residueDays", width: 120, slot: true}
        ],
      },
      data: []
    };
  },
  created(){
    this.query.isArchived_eq = 0;
    this.onLoad(this.page);
  },
  methods: {
    rowUpdate(row) {
      update(row);    //后台接口的update()接口
      row.$cellEdit = false;    /执行完update事件后/设置对应行中的列不可编辑
    },
    onLoad(page, params = {}) {
      if(this.query.isArchived_eq === DICT.archivedType[0].label) {
        this.query.isArchived_eq = 0;
      }
      list(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.data.forEach(item => {
          item.residueAmount = item.reckonAmount - item.usedAmount;
          item.residueDays = item.residueAmount / item.daysAmount;
          if (item.chargeType === -1) item.chargeType = null;
        });
      });
    },
    handleRowClick(row, column) {    //列的双击事件
     if (["chargeType", "personId"].includes(column.property)) {
        this.$refs.crud.rowCell(row, row.$index);
      }
    }
  }
};
</script>

<style>
</style>

接口文件

输出变量文件

 最终效果如下