一、隔行变色
<a-table ref="table" id="table" :pagination="{ pageSize: pageSizes, showSizeChanger: false }" :columns="columns"
:data-source="datas" :rowClassName="addRowColor" :scroll="{ x: 1500 }">
</a-table>
在标签<a-table>中添加:rowClassName属性,以及添加addRowColor函数
const addRowColor = (_record, index) => {
let className = '';
className = index % 2 === 0 ? 'oddRow' : 'evenRow';
return className
}
在<style>中添加oddRow与evenRow的样式
::v-deep(.ant-table-content .ant-table-tbody .oddRow), {
background: #a4e8ca !important;
}
::v-deep(.ant-table-content .ant-table-tbody .evenRow) {
background: #ffeff4 !important;
}
二、取消Table的hover
::v-deep(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td, .ant-table-row-hover, .ant-table-row-hover>td) {
background: none !important;
}
三、两侧表格确定,中间表格列数不确定
1、相继导入表头,使用dataIndex与数据相对应,fixed确定位置,titile确定表格内容
columns.push({ title: '时间', dataIndex: 'date', width: 200, fixed: 'left' });
TitleName.value.map((item) => {
if (item.substring(item.length - 3, item.length) == 'Gas') {
columns.push({ title: '用气量', dataIndex: item, width: 120, fixed: 'center' });
} else {
columns.push({ title: '流量计', dataIndex: item, width: 180, fixed: 'center' });
}
})
columns.push({title: '合计',fixed: 'right',width: 100,dataIndex: 'all'},)
2、导入表格内容,每条数据对象的对象名与columns中的dataIndex相对应
ReportStore.Report.map((i) => {
//将同一个数组中的多个对象合并成为一个对象即为childrens
var childrens = {}
i.children.map((item) => {
childrens = { ...childrens, ...item }
})
childrens['all'] = `${i.all} m³`
childrens['date'] = i.data
//datas为table中要引入的数据
datas.push(childrens)
})
}