特殊table的二次开发

【这是设计稿】

【最终基于vxe-table二开的ui】

当时看到这个设计稿的时候，开始是觉得这个表格不太好实现。至少使用element plus el-table 是不太好做

我个人认为的难点：

• N1： 1.处这里的独占一行

• N2：2.这个末尾的斑马类表格结构

• N3:3.点击2 会增加3这个一行优惠含税总价，以及 点击4处的删除该行

• N4:4:每个单元格的展示，比如有的是下拉 有的文本，有的input

=》 其实element plus 也有合并一行的options =》 ：span-method =“arraySpanMethod” 传入一个函数，对于行号处理即可。 这个在文档里都有，我就仅仅解释一下。

我这里用的 vxe-table
<vxe-table height="350" align="center" header-align="center" footer-align="left"
:edit-config="{ trigger: 'click', mode: 'row' }" footer-cell-class-name="footerCell"
 :footer-span-method="footerColspanMethod" :footer-method="footerMethod" :show-footer="true"
show-overflow ref="tableRef" max-height="400" :data="tableData">


主要配置：


》:footer-method="footerMethod"  ：表示表尾数据【表尾占几行】
》:footer-span-method="footerColspanMethod"：表示表尾的合并单元格

const footerMethod: VxeTablePropTypes.FooterMethod<RowVO> = () => {
  return footerMethodData.value
  // 公司云桌面不允许大段复制代码，很烦，
}

主要html：
这里seq 表示的 vxe-table的排序字段，设计稿中添加一行的位置是在排序这里。
 <vxe-column field="seq" type="seq" width="70" class="h-full">
        <template #footer="{ row }">
            // 插槽中拿到的row 就是  footerMethodData.value中的每一行，
            
         </template>
 </vxe-column>               

至于N3 这个地方，将数据定义为ref 响应式数据，点击的时候添加

N4: vxe-table>vxe-column下单元格数据的格式化

<vxe-column field="suggestedPrice" title="建议售价" :edit-render="{ enabled: false }">
       <template #default="{ row }">
         <span>{{ row.suggestedPrice }}</span>
       </template>
</vxe-column>

这里对应每一个单元格的数据。 默认插槽可以指定单元格的展示方式。

但是对于前面两个字段，修改时是通过点击单元格触发的。遇到了两个坑 K1: 某个字段的数据不展示，如下图，字段这里其实是有数据的，但是就是不显示数据。 点击进入edit模式后才可以看到,到这里就发现了这个坑K2 这里其实是

 <vxe-column field="type" title="类别" :edit-render="sexEditRender">
   <!-- 111 --> 
   //对于这种设置edit-render模式的列， 里面不允许有注释之类的，否则就会看不到数据
</vxe-column>

const sexEditRender = reactive({
  name: 'VxeSelect',
  props: {
    multiple: true
  },
  options: [
    { name: '女', code: '女' },
    { name: '男', code: '男' }
  ],
  optionProps: {
    label: 'name',
    value: 'code'
  }
})

K2：点击后触发的其实是整条记录的edit-render事件，一开始我因为是批量复制的vxe-column,就导致其他的vxe-column的edit-render属性都设置的一个空对象，这导致其他的单元格的数据在edit下是空白的。

如图： 宁可其他列的不设置这个edit-render属性或者 设置：edit-render={enable:true}//禁止触发edit事件都可以。 【

 <vxe-column field="suggestedPrice" title="建议售价" :edit-render="{ enabled: false }">
      <template #default="{ row }">
         <span>{{ row.suggestedPrice }}</span>
     </template>
</vxe-column>

】

这样进入edit模式的话 其他字段比如 建议售价就可以看到了。