<vxe-grid
  ref='xGrid'
  v-bind="gridOptions"
  @cell-click="cellClickEvent" //設(shè)置表格編輯方式點(diǎn)擊列觸發(fā)，該方法是點(diǎn)擊某列時(shí)觸發(fā)的方法
  @edit-closed="editClosedEvent"> //當(dāng)被編輯的列失去焦點(diǎn)時(shí)即為編輯結(jié)束，觸發(fā)該方法
    <template #product_item="{ data }">   //這里是動(dòng)態(tài)配置表單項(xiàng)productList是從后臺(tái)請(qǐng)求到的數(shù)據(jù)經(jīng)過(guò)處理后要渲染到option中的值，value、label
        <vxe-select v-model="data.topic" placeholder="選擇項(xiàng)目名稱" 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)" />   //文檔中自帶的重置按鈕如果不攔截的話無(wú)法對(duì)自定義的表單數(shù)據(jù)進(jìn)行操作，故這里需要自定義一個(gè)方法
    </template>
</vxe-grid>

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

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

//如果進(jìn)頁(yè)面就請(qǐng)求后臺(tái)數(shù)據(jù)渲染下拉框的話，它是沒(méi)有數(shù)據(jù)的，我也在網(wǎng)上找了很多解決辦法，要么找不到，要么代碼寫(xiě)的沒(méi)頭沒(méi)尾的，很不友好
//點(diǎn)擊列的時(shí)候判斷列屬性，如果是想要編輯的那個(gè)列再去后臺(tái)請(qǐng)求數(shù)據(jù)，然后以下拉框的格式返回給option就有數(shù)據(jù)了
cellClickEvent({row, column}) {
  if (column.property == 'charger') {
    let list = [];
    // 該處是請(qǐng)求后臺(tái)的方法，封裝在別處了，直接用axios去請(qǐng)求也可
    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的值是你編輯后的值
        // 這里遇到一個(gè)問(wèn)題是：下拉框選擇值時(shí)只能拿到其value值，不像el-select中可以同時(shí)拿到label和value的值
        // 由于時(shí)間緊我這里是拿到value值到后臺(tái)數(shù)據(jù)庫(kù)查詢出其對(duì)應(yīng)的lebel值再進(jìn)行后續(xù)操作了，時(shí)間豐富的小伙伴可以深入研究一下
        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="請(qǐng)選擇日期時(shí)間" 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="'請(qǐng)選擇' + 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)容設(shè)置
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: '任務(wù)工作臺(tái)',
                align: 'center',
                children: [] , //注：其他表格頭設(shè)置在 children 內(nèi)設(shè)置列項(xiàng)即可
            } 
            ],  
            dataSource: [],
        }, 
      }
  },
 
// 方法設(shè)置
        // 通用行合并函數(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 }
            }   
       },
       // 計(jì)算合并列
       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
        }, 
   /********** 其他方法此處略過(guò)，具體根據(jù)項(xiàng)目需求設(shè)定處理即可...... *********/