vxe-table编辑单元格动态插槽slot的使用

业务场景：表格中只有特定某一行的的单元格可以编辑，列很多，为每个列写个插槽要写很多重复代码，所以这里使用动态插槽，简化代码量。显示编辑图标，点击编辑图标隐藏。失去焦点保存调后台接口。

方法一、

1、后端返回的数据里可以编辑的行数据添加属性 edit: true；不可编辑的行数据里添加属性 edit: false；

2、把列数组里的插槽和field提取出来为循环使用做准备，如果直接使用导入进来的columns无法显示，所以需要处理后使用。

方法二、可以为每个列名使用相同的插槽名，使代码更简洁。

列名文件示例columns.js

 export const columns2 = [{
    title: '温差',
    field: 'pumpCon',
    align: 'center',
    width: "160",
    editRender: {},
    slots: { 
      edit: 'input_edit',
      default: 'input_default',
    },
  },
  {
    title: '昨日水',
    field: 'yesterdayWater',
    align: 'right',
    width: "110",
    editRender: {},
    slots: { 
      edit: 'input_edit',
      default: 'input_default',
    },
  },
  {
    title: '累计',
    field: 'yesterdayWaterSum',
    align: 'right',
    width: "110",
  },
]

 
              <template #input_edit="{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex }">
 
                
                <div
                  v-if="[1].includes(rowIndex) && ['pumpCon'].includes(column.field)"
                  style="display: flex; align-items: center;justify-content: flex-end;"
                >
                  <vxe-input
                    v-model="row[column.field]"
                    type="float"
                    :min="0"
                    :max="99999999"
                    :digits="getDigits(column.title)"
                    @prev-number="onClickBtn(row, rowIndex, column.field, time)"
                    @next-number="onClickBtn(row, rowIndex, column.field, time)"
                    @blur="onBlur(row, rowIndex, column.field, time)"
                  >vxe-input>
                div>
 
                
                <div v-else>
                  {{ row[column.field] }}
                div>
 
              template>
 
// Js代码 这里失去焦点就调接口，所以当使用输入框的上下箭头时，加入防抖使用
     // 防抖
      onClickBtn: debounce((row, rowIndex, field, time)=>{
        methods.onBlur(row, rowIndex, field, time);
      }, 300),
      onBlur(row, rowIndex, field, time) {
        let value = row?.[field] || '';
        let key = `${rowIndex}-${field}`;
        ...  
      }

方法一、列名文件示例columns.js

export const columns1 = [
  {
    title: '名称',
    field: "heatSourceName",
    align: 'left',
    width: "160",
    slots: { header: 'header_heatSourceName', default: '_heatSourceName' },
  },
  {
    title: "日流量(t/h)",
    field: "supTemp",
    width: "140",
    align: 'right',
    sortable: false,
    editRender: { autofocus: '.vxe-input--inner' },
    slots: { default: '_supTemp', edit: 'edit_supTemp' },
  },
  {
    title: "日热量(GJ/h)",
    field: "supPres",
    width: "140",
    align: 'right',
    sortable: false,
    editRender: { autofocus: '.vxe-input--inner' },
    slots: { default: '_supPres', edit: 'edit_supPres' },
  },
  {
    title: "日压力(Mpa)",
    field: "instFlowSup",
    width: "160",
    align: 'right',
    sortable: false,
    editRender: { autofocus: '.vxe-input--inner' },
    slots: { default: '_instFlowSup', edit: 'edit_instFlowSup' },
  }, ...]

循环插槽HTML写法

<vxe-grid ref="xGrid1" v-bind="gridOptions1" :span-method="spanMethods">
                <template #header_heatSourceName>
                  <div class="first-col">
                    <div class="first-col-top">指标div>
                    <div class="first-col-bottom">热源div>
                  div>
                template>
                
                <template v-for="item in defaultSlots1" :key="item.field" v-slot:[item.slot]="{ row }">
                  <div style="display: flex; align-items: center;`justify-content: ${row[item.field] === 'heatSourceName' ? flex-start : flex-end}`"
                    v-if="row.edit && timeInfo === timeInfo1">
                    <i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;">i>{{ row[item.field] }}
                  div>
                  <div v-else>
                    {{ row[item.field] }}
                  div>
                template>
                <template v-for="item in editSlots1" :key="item.field" v-slot:[item.slot]="{ row }">
                  <div v-if="row.edit && timeInfo === timeInfo1">
                    <vxe-input v-model="row[item.field]" type="number" :min="0" :max="99999999">vxe-input>
                  div>
                  <div v-else>
                    {{ row[item.field] }}
                  div>
                template>
                
                
              vxe-grid>

 Js写法