ant-design-vue, a-table,固定左侧2列，根据日期动态生成右侧表格数据

四喜花露水

已于 2024-07-14 17:12:06 修改

阅读量624

点赞数 8

分类专栏： Antd vue 文章标签： vue.js javascript 前端 anti-design-vue

于 2024-01-15 15:43:10 首次发布

本文链接：https://blog.csdn.net/gaowxx/article/details/135602688

版权

Antd vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

自定义一个dateData数组，template使用自定义dateData数组做v-for循环，注意 :columns 的 slots title 的值要与自定义dateData的属性dateName做对应，从而可以使用dateData中的数据。

:scroll也要进行动态计算，缺陷是resize时table原本的fixed列会错乱。

 <a-table :scroll="{ x: columns.length * 140  }" :columns="columns" :data-source="tableData" :rowKey="(record) => { return record.id }" :pagination="pagination">  
     <!--  关键句 循环的是dateData" -->
     <template v-for="(item) in dateData">
       <!--  关键句 在设置thObj时做对应，设置slots: { title: this.dateData[i].dateName } -->
       <span :slot="item.dateName" :key="item.id"> 
        {{item.dateName}} 
        <span :class="item.weekday=='周日'? 'txt-red':item.weekday=='周六'? 'txt-red':''">{{item.weekday}}</span>
         </span>
     </template>        
</a-table>

data

dateData: [],
columns: [   
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 80,
        fixed: 'left'
    },         
    {
        title: 'th',
        dataIndex: 'name',
        key: 'name',
        width: 120,
        fixed: 'left'
    }
],
tableData: [
    {   
        id: 1,
        name: 'A'           
    }
],

methods

setMockData() {
    var weekDayArr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

    for(var i = 0;i<30;i++){
        let obj = {
            id: Date.now() + i,
            // 从今天往前的30个日期
            dateName: new Date(new Date().setDate(new Date().getDate()-i)).toLocaleDateString(),
            // 判断某个日期是周几
            weekday: weekDayArr[new Date(new Date().setDate(new Date().getDate()-i)).getDay()],
            data: '00:00-12:00 12:00-24:00',
        }
        this.dateData.push(obj)                
    }
    
},
setColData() {
    for(let i = 0; i < this.dateData.length; i++) {
        let dataColNmae = 'data'+ (i + 1)
        let thObj = {            
            slots: { title: this.dateData[i].dateName }, // 关键句，与dateData关联
            dataIndex: dataColNmae,
            key: dataColNmae,
            width: 140,
            scopedSlots: { customRender: 'data'+ (i+1) } // 关键句，与tableData的data做对应
        }                 

        // th
        this.columns.push(thObj)    

        // td
        for(let j = 0; j < this.tableData.length; j ++) {
            this.tableData[j][dataColNmae] = this.dateData[i].data
        } 
    }  
},

  created() {
      this.setMockData()
      this.setColData()

},

"缺陷是resize时table原本的fixed列会错乱"的解决方案：

1. 如果是弹窗引起的表格fixed变形，解决方案是需要将弹窗的dom层级设置到body下一级

2.如果是resize窗口引起的表格fixed变形，解决方案是将表格设置为固定宽度，让外层包裹的div去横线滚动

两者的关键点都是【不要改变表格这层div的宽度】即可