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. 使用

<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.配置

  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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值