vxetable和antdv（table）使用
vxetable版本：2.9
antdv版本：1.7.8
1. 表头数据
import { h } from '@vue/composition-api'
export const columns = [
{
title: '基本信息',
children: [
{
title: '编号',
dataIndex: 'warnCode',
align: 'center',
width: 170
},
{
title: '等级',
dataIndex: 'warnLv',
align: 'center',
customRender: (text, row) => {
let color
switch (row.warnLv) {
case '1级':
color = '#891006'
break
case '2级':
color = '#AC820F'
break
case '3级':
color = '#319641'
break
case '4级':
color = '#016CAF'
break
}
return h('span', {
style: {
color:'#ffffff',
boxSizing: 'border-box',
padding:'0 5px',
background: color
}
}, text)
}
},
{
title: '信息',
dataIndex: 'warnInfo',
align: 'center',
width: 300,
ellipsis: true
},
{
title: '时间',
dataIndex: 'warnDatetime',
align: 'center',
width: 170
}
]
},
{
title: '确认信息',
children: [
{
title: '状态',
dataIndex: 'warnStatusName',
align: 'center',
width: 150,
ellipsis: true
},
{
title: '人员',
dataIndex: 'userName',
align: 'center',
customRender: (text) => {
return text ? text : '--'
}
},
{
title: '时间',
dataIndex: 'affirmDay',
align: 'center',
customRender: (text) => {
return text ? text : '--'
},
width: 170
}
]
}
]
export const columnsGrid = [
{
title: '基本信息',
align: 'center',
children: [
{
title: '编号',
field: 'warnCode',
align: 'center',
width: 170
},
{
title: '等级',
field: 'warnLv',
align: 'center',
customRender: (text, row) => {
let color
switch (row.warnLv) {
case '1级':
color = '#891006'
break
case '2级':
color = '#AC820F'
break
case '3级':
color = '#319641'
break
case '4级':
color = '#016CAF'
break
}
return h('span', {
style: {
color:'#ffffff',
boxSizing: 'border-box',
padding:'0 5px',
background: color
}
}, text)
}
},
{
title: '信息',
field: 'warnInfo',
align: 'center',
width: 300,
},
{
title: '时间',
field: 'warnDatetime',
align: 'center',
width: 170
}
]
},
{
title: '确认信息',
align: 'center',
children: [
{
title: '状态',
field: 'warnStatusName',
align: 'center',
width: 150,
},
{
title: '人员',
field: 'userName',
align: 'center',
customRender: (text) => {
return text ? text : '--'
}
},
{
title: '时间',
field: 'affirmDay',
align: 'center',
customRender: (text) => {
return text ? text : '--'
},
width: 170
}
]
}
]
2. 使用
3.配置
- 斑马条纹
- 鼠标hover
- 单元格溢出省略号
- 设置宽高,滚动条
- 分页
a-table
斑马条纹 - 通过判断下标css设置
/deep/ .ant-table-striped .table-striped td {
background-color: #F4F4F4;
}
鼠标hover - 默认
单元格溢出省略号 - 表头配置 ellipsis: true,
设置宽高,滚动条
// y 轴固定高度 x:max-content
1. 操作栏 设置宽度 和 fixed: 'right', Y 轴 滚动条会在外部
2. 操作栏 设置 fixed: 'right', 不设置宽度 会多出空白列
3. 操作栏 不设置fixed ,不设置宽度 正常
// y 轴固定高度 x:true
1. 操作栏 不设置fixed ,不设置宽度 错位
2. 每列都设置宽度 错位
// y 轴固定高度 x:固定宽度
1. 每列设置固定宽度,只留一列不设置宽度，不然内容和表头对不齐
分页 组件自带
vxe-grid
斑马条纹 - 组件上配置 stripe
鼠标hover - 组件上配置 :row-config="{isCurrent: true, isHover: true}"
单元格溢出省略号 - 表头配置 showOverflow:true 获取组价上配置 showOverflow
设置宽高,滚动条
自身设置 show-overflow
根据父级设置
在vxe-grid组件外部包裹的div设置宽高 overflow: hidden;
vxe-grid上添加auto-resize自适应
*需要每个列设置宽度
分页 需要单独分页组件
vxetable
antdv-table