Ant中Table表格的一些设置

一、隔行变色

 <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)
      })
    }