Ant Design of Vue表格排序以及自定义样式

最新推荐文章于 2025-06-30 12:03:03 发布

爱橘子

最新推荐文章于 2025-06-30 12:03:03 发布

阅读量607

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/q2724338648/article/details/134280897

文章详细描述了如何在表格组件中实现区域路径名的自定义样式，包括背景颜色和行间切换，以及根据时间或数字进行排序的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.自定义样式

{
          title: '区域',
          dataIndex: 'pathName',
          key: 'pathName',
            //控制单列样式
          customCell: (record, rowIndex) => {
            return {
              style: {
                'background-color': '#063d79'
              },
              class: ['boxColor' + (rowIndex % 2), 'one']
            }
          },
            //排序
    sorter: (a, b) => {
            let aTime = a.startTime ? new Date(a.startTime).getTime() : 0 // 需要先转换成时间戳
            let bTime = b.startTime ? new Date(b.startTime).getTime() : 0
            return aTime - bTime
          },
          width: this.$global.tableTitleWidth.pathname,//宽度
            //自定义内容以及单个点击事件
          customRender: (text, record, index) => {
            if (text) {
              if (text) {
                let pathNames = text.split('/')[1] + (text.split('/')[2] ? '/' + text.split('/')[2] : '')
                return (
                  <div class="ellipsisText"  onClick={(e) => this.onbasicinformation(record)}>
                    <a-tooltip placement="topLeft" overlayClassName="ellipsisTexttooltip">
                      <template slot="title">
                        <span style="color:#000;font-size: 18px;">{pathNames}</span>
                      </template>
                      {pathNames}
                    </a-tooltip>
                  </div>
                )
              } else {
                return '-'
              }
            }
          },
        },

2.排序

根据时间排序

sorter: (a, b) => {
            let aTime = a.startTime ? new Date(a.startTime).getTime() : 0 // 需要先转换成时间戳
            let bTime = b.startTime ? new Date(b.startTime).getTime() : 0
            return aTime - bTime
          },

根据数字排序

sorter: (a, b) => a.Datas - b.Datas,