devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vxe-table编辑单元格动态插槽slot的使用_jeecg中jvxetable表格中名称列的插槽

作者：AllinToyou | 2024-06-09 01:34:23

赞

踩

jeecg中jvxetable表格中名称列的插槽

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

方法一、

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

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

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

列名文件示例columns.js

  1.  export const columns2 = [{
  2.     title: '温差',
  3.     field: 'pumpCon',
  4.     align: 'center',
  5.     width: "160",
  6.     editRender: {},
  7.     slots: { 
  8.       edit: 'input_edit',
  9.       default: 'input_default',
  10.     },
  11.   },
  12.   {
  13.     title: '昨日水',
  14.     field: 'yesterdayWater',
  15.     align: 'right',
  16.     width: "110",
  17.     editRender: {},
  18.     slots: { 
  19.       edit: 'input_edit',
  20.       default: 'input_default',
  21.     },
  22.   },
  23.   {
  24.     title: '累计',
  25.     field: 'yesterdayWaterSum',
  26.     align: 'right',
  27.     width: "110",
  28.   },
  29. ]
  1.  <!-- input_edit -->
  2.               <template #input_edit="{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex }">
  3.  
  4.                 <!-- number -->
  5.                 <div
  6.                   v-if="[1].includes(rowIndex) && ['pumpCon'].includes(column.field)"
  7.                   style="display: flex; align-items: center;justify-content: flex-end;"
  8.                 >
  9.                   <vxe-input
  10.                     v-model="row[column.field]"
  11.                     type="float"
  12.                     :min="0"
  13.                     :max="99999999"
  14.                     :digits="getDigits(column.title)"
  15.                     @prev-number="onClickBtn(row, rowIndex, column.field, time)"
  16.                     @next-number="onClickBtn(row, rowIndex, column.field, time)"
  17.                     @blur="onBlur(row, rowIndex, column.field, time)"
  18.                   ></vxe-input>
  19.                 </div>
  20.  
  21.                 <!-- else -->
  22.                 <div v-else>
  23.                   {{ row[column.field] }}
  24.                 </div>
  25.  
  26.               </template>
  27.  
  28. // Js代码 这里失去焦点就调接口，所以当使用输入框的上下箭头时，加入防抖使用
  29.      // 防抖
  30.       onClickBtn: debounce((row, rowIndex, field, time)=>{
  31.         methods.onBlur(row, rowIndex, field, time);
  32.       }, 300),
  33.       onBlur(row, rowIndex, field, time) {
  34.         let value = row?.[field] || '';
  35.         let key = `${rowIndex}-${field}`;
  36.         ...  
  37.       }

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

  1. export const columns1 = [
  2.   {
  3.     title: '名称',
  4.     field: "heatSourceName",
  5.     align: 'left',
  6.     width: "160",
  7.     slots: { header: 'header_heatSourceName', default: '_heatSourceName' },
  8.   },
  9.   {
  10.     title: "日流量(t/h)",
  11.     field: "supTemp",
  12.     width: "140",
  13.     align: 'right',
  14.     sortable: false,
  15.     editRender: { autofocus: '.vxe-input--inner' },
  16.     slots: { default: '_supTemp', edit: 'edit_supTemp' },
  17.   },
  18.   {
  19.     title: "日热量(GJ/h)",
  20.     field: "supPres",
  21.     width: "140",
  22.     align: 'right',
  23.     sortable: false,
  24.     editRender: { autofocus: '.vxe-input--inner' },
  25.     slots: { default: '_supPres', edit: 'edit_supPres' },
  26.   },
  27.   {
  28.     title: "日压力(Mpa)",
  29.     field: "instFlowSup",
  30.     width: "160",
  31.     align: 'right',
  32.     sortable: false,
  33.     editRender: { autofocus: '.vxe-input--inner' },
  34.     slots: { default: '_instFlowSup', edit: 'edit_instFlowSup' },
  35.   }, ...]

循环插槽HTML写法

  1. <vxe-grid ref="xGrid1" v-bind="gridOptions1" :span-method="spanMethods">
  2.                 <template #header_heatSourceName>
  3.                   <div class="first-col">
  4.                     <div class="first-col-top">指标</div>
  5.                     <div class="first-col-bottom">热源</div>
  6.                   </div>
  7.                 </template>
  8.                 <!--  分割线，动态插槽写法   -->
  9.                 <template v-for="item in defaultSlots1" :key="item.field" v-slot:[item.slot]="{ row }">
  10.                   <div style="display: flex; align-items: center;`justify-content: ${row[item.field] === 'heatSourceName' ? flex-start : flex-end}`"
  11.                     v-if="row.edit && timeInfo === timeInfo1">
  12.                     <i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row[item.field] }}
  13.                   </div>
  14.                   <div v-else>
  15.                     {{ row[item.field] }}
  16.                   </div>
  17.                 </template>
  18.                 <template v-for="item in editSlots1" :key="item.field" v-slot:[item.slot]="{ row }">
  19.                   <div v-if="row.edit && timeInfo === timeInfo1">
  20.                     <vxe-input v-model="row[item.field]" type="number" :min="0" :max="99999999"></vxe-input>
  21.                   </div>
  22.                   <div v-else>
  23.                     {{ row[item.field] }}
  24.                   </div>
  25.                 </template>
  26.                 <!--  分割线，下面为常规写法   -->
  27.                 <!-- <template #_supTemp="{ row }">
  28.                   <div style="display: flex; align-items: center;justify-content: flex-end;"
  29.                     v-if="row.edit && timeInfo === timeInfo1">
  30.                     <i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row.supTemp }}
  31.                   </div>
  32.                   <div v-else>
  33.                     {{ row.supTemp }}
  34.                   </div>
  35.                 </template>
  36.                 <template #edit_supTemp="{ row }">
  37.                   <div v-if="row.edit && timeInfo === timeInfo1">
  38.                     <vxe-input v-model="row.supTemp" type="number" :min="0" :max="99999999"></vxe-input>
  39.                   </div>
  40.                   <div v-else>
  41.                     {{ row.supTemp }}
  42.                   </div>
  43.                 </template>
  44.                 <template #_supPres="{ row }">
  45.                   <div style="display: flex; align-items: center;justify-content: flex-end;"
  46.                     v-if="row.edit && timeInfo === timeInfo1">
  47.                     <i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row.supPres }}
  48.                   </div>
  49.                   <div v-else>
  50.                     {{ row.supPres }}
  51.                   </div>
  52.                 </template>
  53.                 <template #edit_supPres="{ row }">
  54.                   <div v-if="row.edit && timeInfo === timeInfo1">
  55.                     <vxe-input v-model="row.supPres" type="number" :min="0" :max="99999999"></vxe-input>
  56.                   </div>
  57.                   <div v-else>
  58.                     {{ row.supPres }}
  59.                   </div>
  60.                 </template>
  61.                 <template #_waterCnp="{ row }">
  62.                   <div style="display: flex; align-items: center;justify-content: flex-end;"
  63.                     v-if="row.edit && timeInfo === timeInfo1">
  64.                     <i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row.waterCnp }}
  65.                   </div>
  66.                   <div v-else>
  67.                     {{ row.waterCnp }}
  68.                   </div>
  69.                 </template>
  70.                 <template #edit_waterCnp="{ row }">
  71.                   <div v-if="row.edit && timeInfo === timeInfo1">
  72.                     <vxe-input v-model="row.waterCnp" type="number" :min="0" :max="99999999"></vxe-input>
  73.                   </div>
  74.                   <div v-else>
  75.                     {{ row.waterCnp }}
  76.                   </div>
  77.                 </template> -->
  78.               </vxe-grid>

 Js写法

  1. <script>
  2. import {
  3.   defineComponent,
  4.   ref,
  5.   reactive,
  6.   toRefs,
  7.   computed,
  8.   watch,
  9.   onMounted,
  10.   nextTick,
  11. } from 'vue'
  12. import { columns1 } from './columns.js';
  13. import moment from 'moment'
  14. import { useAppStoreWithOut } from '@/store/modules/app'
  15.  
  16. export default defineComponent({
  17.   setup() {
  18.     const appStore = useAppStoreWithOut();
  19.     const state = reactive({
  20.       timeInfo: moment(appStore.getSysTime).subtract(1, 'day').format('YYYY年MM月DD日'),
  21.       timeInfo1: moment(appStore.getSysTime).subtract(1, 'day').format('YYYY年MM月DD日'),
  22.       gridOptions1: {
  23.         border: true,
  24.         height: '100%',
  25.         showFooter: false,
  26.         showOverflow: true,
  27.         'column-config': { resizable: false },
  28.         'edit-config': {
  29.           trigger: 'click', mode: 'cell', showIcon: false },
  30.         'scroll-y': { enable: true, mode: 'wheel' },
  31.         columns: computed(() => {
  32.           // 拼接序号列
  33.           return columns1;
  34.         }),
  35.         data: computed(() => {
  36.           let data = [
  37.             {
  38.               "heatSourceName": "Leo源",
  39.               "supTemp": null,
  40.               "supPres": null,
  41.               "instFlowSup": null,
  42.               "retTemp": null,
  43.               "retPres": null,
  44.               "muwInstFlow": null,
  45.               "heatCnp": null,
  46.               "waterCnp": null,
  47.               "muwaccFlow": null,
  48.               "accHeat": null
  49.             },
  50.             {
  51.               "heatSourceName": "晋源",
  52.               "supTemp": "86.89",
  53.               "supPres": null,
  54.               "instFlowSup": "1028.31",
  55.               "retTemp": "41.51",
  56.               "retPres": "0.111",
  57.               "muwInstFlow": "514.64",
  58.               "heatCnp": "7923.92",
  59.               "waterCnp": "396.58",
  60.               "muwaccFlow": "29207293.83",
  61.               "accHeat": "680.0334"
  62.             },
  63.             {
  64.               "heatSourceName": "龙山",
  65.               "supTemp": "86.90",
  66.               "supPres": null,
  67.               "instFlowSup": "514.24",
  68.               "retTemp": "41.50",
  69.               "retPres": null,
  70.               "muwInstFlow": "515.29",
  71.               "heatCnp": "3960.97",
  72.               "waterCnp": "395.64",
  73.               "muwaccFlow": "1148264.05",
  74.               "accHeat": "166.2449"
  75.             }
  76.           ]
  77.           data.forEach((item, index) => {
  78.             if (index === 1 || index === 2) {
  79.               item.edit = true
  80.             } else {
  81.               item.edit = false
  82.             }
  83.           });
  84.           return data
  85.         }),
  86.       },
  87.       // 合并单元格方法，这里只合并第一行和第二行
  88.       spanMethods({ row, $rowIndex, column, data }) {
  89.         let fields = ["retTemp"]
  90.         let cellValue = row[column.property]
  91.         if ($rowIndex == 2 || $rowIndex == 3) {
  92.           if (cellValue && fields.includes(column.property)) {
  93.             let prevRow = data[$rowIndex - 1]
  94.             let nextRow = data[$rowIndex + 1]
  95.  
  96.             if (prevRow && prevRow[column.property] === cellValue) {
  97.               return { rowspan: 0, colspan: 0 }
  98.             } else {
  99.               let countRowspan = 1
  100.               while (nextRow && nextRow[column.property] === cellValue) {
  101.                 nextRow = data[++countRowspan + $rowIndex]
  102.               }
  103.               if (countRowspan > 1) {
  104.                 return { rowspan: countRowspan, colspan: 1 }
  105.               }
  106.             }
  107.           }
  108.         }
  109.     })
  110.     
  111.     // 提取默认插槽
  112.     const defaultSlots1 = computed(() => {
  113.       return columns1.map((column, index) => {
  114.         return {
  115.           slot: column.slots.default,
  116.           field: column.field,
  117.         }
  118.       })
  119.     })
  120.     // 提取编辑插槽
  121.     const editSlots1 = computed(() => {
  122.       return columns1.map((column, index) => {
  123.         return {
  124.           slot: column.slots.edit,
  125.           field: column.field
  126.         }
  127.       })
  128.     })
  129.    }
  130.  
  131.     
  132.     return {
  133.       ...toRefs(state),   
  134.       defaultSlots1,
  135.       editSlots1,
  136.     }
  137.   },
  138.  
  139. })
  140. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/692059
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号