【这是设计稿】
【最终基于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” 传入一个函数,对于行号处理即可。 这个在文档里都有,我就仅仅解释一下。
js 代码解读复制代码我这里用的 vxe-table
"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的排序字段,设计稿中添加一行的位置是在排序这里。
"seq" type="seq" width="70" class="h-full">
<template #footer="{ row }">
// 插槽中拿到的row 就是 footerMethodData.value中的每一行,
template>
至于N3 这个地方,将数据定义为ref 响应式数据,点击的时候添加
N4: vxe-table>vxe-column下单元格数据的格式化
js 代码解读复制代码"suggestedPrice" title="建议售价" :edit-render="{ enabled: false }">
<template #default="{ row }">
<span>{{ row.suggestedPrice }}span>
template>
这里对应每一个单元格的数据。 默认插槽可以指定单元格的展示方式。
但是对于前面两个字段,修改时是通过点击单元格触发的。遇到了两个坑 K1: 某个字段的数据不展示,如下图,字段这里其实是有数据的,但是就是不显示数据。 点击进入edit模式后才可以看到,到这里就发现了这个坑K2 这里其实是
html 代码解读复制代码 <vxe-column field="type" title="类别" :edit-render="sexEditRender">
//对于这种设置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事件都可以。 【
js 代码解读复制代码 "suggestedPrice" title="建议售价" :edit-render="{ enabled: false }">
<template #default="{ row }">
<span>{{ row.suggestedPrice }}span>
template>
】
这样进入edit模式的话 其他字段比如 建议售价就可以看到了。
评论记录:
回复评论: