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. 使用
<template>
<a-table
:columns="columns"
:data-source="dataSource"
bordered
class='ant-table-striped'
:scroll="{ x: 1400, y: tableY }"
@change="handleTableChange"
:rowKey="(row, index) => index"
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
>
</a-table>
<div style="overflow: hidden;" :style="{height: tableY}">
<vxe-grid
stripe
auto-resize
height="auto"
:row-config="{isCurrent: true, isHover: true}"
size="small"
:columns="columnsGrid"
border
:data="dataSource">
</vxe-grid>
</div>
</template>
<script>
export default {
setup(){
return {
tableY:200
}
}
}
</script>
<style scoped lang="less">
/deep/ .ant-table-striped .table-striped td {
background-color: #F4F4F4;
}
</style>
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自适应
*需要每个列设置宽度
分页 需要单独分页组件