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 colorswitch (row.warnLv) {case '1级':color = '#891006'breakcase '2级':color = '#AC820F'breakcase '3级':color = '#319641'breakcase '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 colorswitch (row.warnLv) {case '1级':color = '#891006'breakcase '2级':color = '#AC820F'breakcase '3级':color = '#319641'breakcase '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"borderedclass='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-gridstripeauto-resizeheight="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.配置

1. 斑马条纹
2. 鼠标hover
3. 单元格溢出省略号
4. 设置宽高,滚动条
5. 分页

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

三国人物