<vxe-grid
  ref='xGrid'
  v-bind="gridOptions"
  @cell-click="cellClickEvent" //設置表格編輯方式點擊列觸發(fā)，該方法是點擊某列時觸發(fā)的方法
  @edit-closed="editClosedEvent"> //當被編輯的列失去焦點時即為編輯結束，觸發(fā)該方法
    <template #product_item="{ data }">   //這里是動態(tài)配置表單項productList是從后臺請求到的數(shù)據(jù)經(jīng)過處理后要渲染到option中的值，value、label
        <vxe-select v-model="data.topic" placeholder="選擇項目名稱" transfer>
          <vxe-option v-for="item in productList" :key="item.value" :value="item.value" :label="item.label" />
        </vxe-select>
    </template>
    <template #operate_item="{ data }">
        <vxe-button type="submit" status="primary" content="查詢" />
        <vxe-button type="reset" content="重置" @click="haha(data)" />   //文檔中自帶的重置按鈕如果不攔截的話無法對自定義的表單數(shù)據(jù)進行操作，故這里需要自定義一個方法
    </template>
</vxe-grid>

gridOptions: {
    border:true,   //是否帶邊框
    stripe: true,   //是否帶斑馬紋
    round: true,   //邊框是否圓角
    showHeaderOverflow: true,   //表頭內(nèi)容過長時是否顯示省略號
    showOverflow: true,   //所有內(nèi)容過長時是否顯示省略號
    keepSource: true,   //是否保持原始值狀態(tài)
    id: 'full_edit_1',   //唯一標識，某些功能會用到，我這里沒有用到，可以忽略
    rowConfig: {   //行配置信息
      isHover: true
    },
    columnConfig: {   //列配置信息
      resizable: true
    },
    printConfig: {   //打印配置項，具體的看文檔吧，很詳細了，注意columns里的field要和實際數(shù)據(jù)的key對應上
      columns: [
        { field: 'name' },
        { field: 'email' },
        { field: 'nickname' },
        { field: 'age' },
        { field: 'amount' }
      ]
    },
    sortConfig: {   //排序配置項
      trigger: 'cell',
      remote: true
    },
    filterConfig: {   //篩選配置項
      remote: true
    },
    pagerConfig: {   //配置分頁
      pageSize: 15,
      pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
      layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']
    },
    formConfig: {   //表單配置項：就是查詢條件，items中的field一定要和實體類名稱對應上，方便管理。這里只放一個input框和下拉框了，其他的自己探索吧，API里都有
      titleWidth: 100,
      titleAlign: 'right',
      items: [
        {
          field: 'topic',
          title: '項目名稱',
          span: 4,
          slots: {
            default: 'product_item'   //這里要和上面動態(tài)配置的表單項名稱對應
          }
        },
        {
          field: 'status',
          title: '狀態(tài)',
          span: 4,
          folding: false,
          itemRender: {
            name: '$select',
            options: [
              { label: '待處理', value: '待處理' },
              { label: '處理中', value: '處理中' },
              { label: '已計劃', value: '已計劃' },
              { label: '已完成', value: '已完成' },
              { label: '已關閉', value: '已關閉' }
            ],
            props: { placeholder: '請選擇項目狀態(tài)' }
          }
        },
        { span: 24, align: 'center', slots: { default: 'operate_item' } }   //查詢重置按鈕
      ]
    },
    toolbarConfig: {   //工具欄配置項
      // 這種寫法是官方文檔寫法，只會執(zhí)行API中對應的方法，若想自己實現(xiàn)按鈕功能需要自定義插槽，如下
      // buttons: [
      //   { code: 'delete', status: 'danger', name: '直接刪除', icon: 'vxe-icon-delete' },
      // ],
      // 自定義插槽
      slots: {
        buttons: ({ row }) => {
          return <el-button-group>
                    <el-button icon="el-icon-plus" type="primary" onClick={() => this.showDialog()}>新建工單</el-button>
                    <el-button icon="el-icon-delete" type="danger" onClick={() => this.$refs.xGrid.commitProxy('delete')} style="margin-left: 10px;">直接刪除</el-button>
                 </el-button-group>
        }
      },
      refresh: true,
      import: true,
      export: true,
      print: true,
      zoom: true,
      custom: true
    },
    proxyConfig: {   //數(shù)據(jù)代理配置項
      seq: true, // 啟用動態(tài)序號代理，每一頁的序號會根據(jù)當前頁數(shù)變化
      sort: true, // 啟用排序代理，當點擊排序時會自動觸發(fā) query 行為
      filter: true, // 啟用篩選代理，當點擊篩選時會自動觸發(fā) query 行為
      form: true, // 啟用表單代理，當點擊表單提交按鈕時會自動觸發(fā) reload 行為
      // 對應響應結果 { result: [], page: { total: 100 } }
      props: {
        result: 'result', // 配置響應結果列表字段
        total: 'page.total' // 配置響應結果總頁數(shù)字段
      },
      // 只接收Promise，具體實現(xiàn)自由發(fā)揮
      ajax: {
        // 當點擊工具欄查詢按鈕或者手動提交指令 query或reload 時會被觸發(fā)
        query: ({ page, sorts, filters, form }) => {
          const queryParams = Object.assign({}, form)
          // 處理排序條件
          const firstSort = sorts[0]
          if (firstSort) {
            queryParams.sort = firstSort.property
            queryParams.order = firstSort.order
          }
          // 處理篩選條件
          filters.forEach(({ property, values }) => {
            queryParams[property] = values.join(',')
          })
          queryParams.page = page.currentPage;
          queryParams.pageSize = page.pageSize;
          //自己在data中定義個baseUrl，用來訪問后臺
          return XEAjax.post(`${this.baseUrl}/queryOrder`, queryParams)
        },
        // 當點擊工具欄刪除按鈕或者手動提交指令 delete 時會被觸發(fā)
        delete: ({ body }) => {
          return XEAjax.post(`${this.baseUrl}/deleteOrder`, JSON.stringify(body.removeRecords));
        },
        // 當點擊工具欄保存按鈕或者手動提交指令 save 時會被觸發(fā)(用自帶的添加按鈕的話會用到這個保存事件，我這里已經(jīng)自定義插槽按鈕事件了，故將該處注釋掉，而且需要實時保存的話也用不上這個按鈕)
        // save: ({ body }) => {
        //   return XEAjax.post(`${this.baseUrl}/updateOrder`, JSON.stringify(body.updateRecords)).then(
        //     res => xxx
        //   );
        // }
      }
    },
    columns: [   //列配置：將在這里顯示數(shù)據(jù)，field要和實體類名稱對應上
      { type: 'checkbox', field: 'id', title: '工單序號' },   //多選框
      { field: 'title',  title: '標題' },
      {
        field: 'status',
        title: '狀態(tài)',
        width: 95,
        slots: {   //該處展示自定義插槽，可以將數(shù)據(jù)封裝到想用的組件里，視覺效果更佳
          default: ( {row} ) => {
            if (row.status == '待處理') {
              return <el-tag type="danger">{row.status}</el-tag>;
            }
            if (row.status == '處理中') {
              return <el-tag type="warning">{row.status}</el-tag>;
            }
            if (row.status == '已計劃') {
              return <el-tag type="info">{row.status}</el-tag>;
            }
            if (row.status == '已完成') {
              return <el-tag>{row.status}</el-tag>;
            }
            if (row.status == '已關閉') {
              return <el-tag type="success">{row.status}</el-tag>;
            }
          }
        },
        filters: [   //配置篩選條件，配置后表頭對應列會有篩選圖標，點開即可操作
          { label: '待處理', value: '待處理' },
          { label: '處理中', value: '處理中' },
          { label: '已計劃', value: '已計劃' },
          { label: '已完成', value: '已完成' },
          { label: '已關閉', value: '已關閉' }
        ],
        filterMultiple: false,   //篩選是否可多選
        editRender: {   //該處是列可編輯狀態(tài)下的編輯框，這里是一個靜態(tài)下拉框，下面有一個動態(tài)下拉框也是我踩雷的地方
          name: '$select',
          options: [
            { label: '待處理', value: '待處理' },
            { label: '處理中', value: '處理中' },
            { label: '已計劃', value: '已計劃' },
            { label: '已完成', value: '已完成' },
            { label: '已關閉', value: '已關閉' }
          ],
          props: { placeholder: '請選擇工單狀態(tài)' }
        }
      },
      {   //該列是獲取后臺數(shù)據(jù)動態(tài)渲染到頁面上的地方，踩雷好幾天
        field: 'charger',
        title: '負責人',
        editRender: {
          name: '$select',
          props: {
            value: [],
            options: [],   //用來顯示下拉框數(shù)據(jù)的地方
            optionProps: {   //下拉框option的配置，該處要有，否則點開下拉框選值的時候?qū)猯abel不會高亮
              value: 'value',
              label: 'label'
            },
            multiple: true,   //可多選
            clearable: true,
            placeholder: '請選擇負責人',
            optionConfig: {
              useKey: true
            }
          }
        },
        formatter: this.formatCharger
      },
      {   //自定義插槽可以自定義事件
        slots: {
          default: ({ row }) => {
            return <el-button type="text" onClick={() => this.handleCell(row)}>詳情</el-button>
          }
        }
      }
    ],
    importConfig: {   //導入配置項，暫時沒用到該功能沒深入研究，API上都有
      remote: true,
      importMethod: this.importMethod,
      types: ['xlsx'],
      modes: ['insert']
    },
    exportConfig: {   //導出配置項，暫時沒用到該功能沒深入研究，API上都有
      remote: true,
      exportMethod: this.exportMethod,
      types: ['xlsx'],
      modes: ['current', 'selected', 'all']
    },
    checkboxConfig: {   //復選框配置項
      labelField: 'id',
      reserve: true,
      highlight: true,
      range: true
    },
    editRules: {   //列編輯規(guī)則
      charger: [
        { required: true, message: '負責人不能為空' }
      ]
    },
    editConfig: {   //可編輯配置項
      trigger: 'click',
      mode: 'cell',   //cell（單元格編輯模式）,row（行編輯模式）
      showStatus: true
    }
  }

haha(val) {
  //這里可以看到所有表單配置中的值
  console.log(val);
}

//如果進頁面就請求后臺數(shù)據(jù)渲染下拉框的話，它是沒有數(shù)據(jù)的，我也在網(wǎng)上找了很多解決辦法，要么找不到，要么代碼寫的沒頭沒尾的，很不友好
//點擊列的時候判斷列屬性，如果是想要編輯的那個列再去后臺請求數(shù)據(jù)，然后以下拉框的格式返回給option就有數(shù)據(jù)了
cellClickEvent({row, column}) {
  if (column.property == 'charger') {
    let list = [];
    // 該處是請求后臺的方法，封裝在別處了，直接用axios去請求也可
    getAllTeamUser(param).then(res => {
      for (let i = 0; i < res.data.length; i++) {
        let obj = {};
        obj.label = res.data[i].nickName;
        obj.value = res.data[i].openId;
        obj.key = res.data[i].openId;
        list.push(obj);
      }
    })
    column.editRender.props.options = list;
  }
}

editClosedEvent ({ row, column }) {
  const $table = this.$refs.xGrid;
  const field = column.property;
  const cellValue = row[field];
  // 判斷單元格值是否被修改
  if ($table.isUpdateByRow(row, field)) {
      setTimeout(() => {
        VXETable.modal.message({
          content: `保存成功！`,
          status: 'success'
        })
        // 局部更新單元格為已保存狀態(tài)
        $table.reloadRow(row, null, field)
        // 保存數(shù)據(jù)后執(zhí)行查詢事件重新渲染表格數(shù)據(jù)，row就是你所編輯的行的數(shù)據(jù)，該處row的值是你編輯后的值
        // 這里遇到一個問題是：下拉框選擇值時只能拿到其value值，不像el-select中可以同時拿到label和value的值
        // 由于時間緊我這里是拿到value值到后臺數(shù)據(jù)庫查詢出其對應的lebel值再進行后續(xù)操作了，時間豐富的小伙伴可以深入研究一下
        XEAjax.post(`${this.baseUrl}/updateOrder`, JSON.stringify(row)).then(
          res => this.$refs.xGrid.commitProxy('query')
        );
      }, 300)
  }
}

 <!--   :span-method="mergeRowMethod"  -->
<vxe-grid
            border
            ref="xGrid" 
            class="moz-style taskTable"
            row-class-name="my-vxe-table-row"
            resizable 
            :scroll-x="{enable: true}"
            :scroll-y="{enable: true}"
            :scrollToLeftOnChange="false" 
            :max-height="600"
            :loading="table.loading"  
            :columns="table.columns" 
            :data="table.dataSource"  
            :edit-config="table.editConfig"
            :menu-config="table.rightMenu" 
            :merge-cells="table.mergeCells" 
            @menu-click="menuClick"
            @edit-closed="editClosedEvent"
            @cell-click="fiveToggle" 
            >  
            <template #xh="{ row }">
                <span v-if="!row.isDictType" class="bl-center">{{ row.xh }}</span>
                <span v-if="row.isDictType" class="bl-left">{{ row.xh }}</span>
            </template>
            <template #text_edit="{ row, column }">
                <vxe-input v-if="!row.isDictType" v-model="row[column.field]" :type="column.fieldtype || 'text'"></vxe-input>
            </template>
            <template #date_edit="{ row, column }">
                <vxe-input v-model="row[column.field]" type="date" placeholder="請選擇日期時間" transfer @change="handleSubmitSave($event, row, column)"></vxe-input> 
            </template>
            <template #list_default="{ row, column }"> 
                 <span class="bl-center"> {{ DictSearch(row, column) }} </span>
            </template> 
            <template #list_edit="{ row, column }">
                <vxe-select v-if="!row.isDictType" v-model="row[column.field]" transfer clearable :placeholder="'請選擇' + column.title">
                    <vxe-option v-for="(item, index) in fxList" :key="index" :value="item.value" :label="item.text"></vxe-option>
                </vxe-select> 
            </template> 
        </vxe-grid> 

// 數(shù)據(jù)內(nèi)容設置
data(){
      return {
        fxList: [], 
        table:{
            loading: false,
            mergeCells:[],
            rightMenu: {
                className: 'my-menus',
                body: {
                    options: [
                        [
                            { code: 'addRowOne', name: '新增' },
                            { code: 'handleDelete', name: '刪除' }, 
                        ]
                    ]
                }, 
            },
            isEdit: false,
            editConfig: { 
                trigger: 'click', 
                mode: 'cell', 
                showIcon:false,
                activeMethod : this.activeCellMethod
            },
            columns: [
            { title: '任務工作臺',
                align: 'center',
                children: [] , //注：其他表格頭設置在 children 內(nèi)設置列項即可
            } 
            ],  
            dataSource: [],
        }, 
      }
  },
 
// 方法設置
        // 通用行合并函數(shù)（將相同多列數(shù)據(jù)合并為一行）
       mergeRowMethod({ row, _rowIndex, column, visibleData }) {
           let that = this
           // console.log(row, _rowIndex, column, visibleData, '_rowIndex, column, visibleData')
           let col_span = that.table.columns[0].children.length || 0 
            if(row.isDictType == true){
                return { rowspan: 1, colspan: col_span }
            }   
       },
       // 計算合并列
       computMecall(dataSource, headList){
            this.table.mergeCells = [] 
            const headL = headList.length || 0
            const tabal_data = dataSource
            let MergeCell_row = 0
            let itemMergeCell = { row: MergeCell_row, rowspan: 1, colspan: headL, col: 0 }
            tabal_data.forEach((bitem, u)=>{
                if(bitem.isDictType){
                    itemMergeCell = { row: u, rowspan: 1, colspan: headL, col: 0 }
                    this.table.mergeCells.push(itemMergeCell)
                }
            })  
       }, 
       // 查字典
       DictSearch(row, column) {
            let res = ''  
            if(column.field in row){
                res = row[column.field]  
                this.fxList.forEach(item => {
                    if(item.value == res){
                        res = item.text
                    }
                })
            }
            return res
        }, 
   /********** 其他方法此處略過，具體根據(jù)項目需求設定處理即可...... *********/