vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

Posted lovellll

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法相关的知识,希望对你有一定的参考价值。

吐槽

今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头

这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路。

在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了。

哎,废话不多说了,看代码吧:

代码示例

使用iviewuitable组件:

最初,直接使用项目中的iviewuitable组件, 给 column 设置 children ,可以实现表头合并。先用写死的数据做了个样例,如下:


<Table :columns="columns" :data="studentData" border></Table>

data()中如下:



      columns: [
        {
          title: ‘序号‘,
          width: 60,
          align: ‘center‘,
          fixed: ‘left‘,
          render: (h, params) => {
            return h(‘span‘, params.row._index + 1)
          }
        },
        {
          title: ‘姓名‘,
          key: ‘name‘,
          align: ‘center‘,
          fixed: ‘left‘,
          width: 80
        },
        {
          title: ‘学号‘,
          key: ‘code‘,
          align: ‘center‘,
          width: 80
        },
        {
          title: ‘性别‘,
          key: ‘sex‘,
          align: ‘center‘,
          width: 80
        },
        {
          title: ‘学期‘,
          key: ‘term‘,
          align: ‘center‘,
          width: 80
        },
        {
          title: ‘9月28日‘,
          align: ‘center‘,
          children: [
            {
              title: ‘阅读‘,
              key: ‘date1_rScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘听力‘,
              key: ‘date1_lScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘写作‘,
              key: ‘date1_wScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘口语‘,
              key: ‘date1_sScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘总分‘,
              key: ‘date1_score‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            }
          ]
        },
        {
          title: ‘8月10日&14日‘,
          align: ‘center‘,
          children: [
            {
              title: ‘阅读‘,
              key: ‘date2_rScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘听力‘,
              key: ‘date2_lScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘写作‘,
              key: ‘date2_wScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘口语‘,
              key: ‘date2_sScore‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            },
            {
              title: ‘总分‘,
              key: ‘date2_score‘,
              align: ‘center‘,
              minWidth: 80,
              sortable: true
            }
          ]
        },
        {
          title: ‘听力提高‘,
          key: ‘lImprove‘,
          align: ‘center‘,
          width: 70
        },
        {
          title: ‘阅读提高‘,
          key: ‘rImprove‘,
          align: ‘center‘,
          width: 70
        },
        {
          title: ‘写作提高‘,
          key: ‘writingImprove‘,
          align: ‘center‘,
          width: 70
        },
        {
          title: ‘口语提高‘,
          key: ‘sImprovem‘,
          align: ‘center‘,
          width: 70
        },
        {
          title: ‘总分提高‘,
          key: ‘srImprove‘,
          align: ‘center‘,
          width: 70
        }
      ],
      studentData: [
        {
          name: ‘xxx‘,
          code: ‘918989070065‘,
          sex: ‘男‘,
          term: ‘2018秋‘,
          date1: ‘9月28日‘,
          date1_rScore: ‘3.5‘,
          date1_lScore: ‘3.5‘,
          date1_wScore: ‘5‘,
          date1_sScore: ‘4‘,
          date1_score: ‘4‘,
          date2: ‘8月10日&14日‘,
          date2_rScore: ‘3.5‘,
          date2_lScore: ‘3.5‘,
          date2_wScore: ‘5‘,
          date2_sScore: ‘4‘,
          date2_score: ‘4‘,
          lImprove: ‘-0.5‘,
          rImprove: ‘0‘,
          wImprove: ‘1.5‘,
          sImprove: ‘0.5‘,
          srImprove: ‘0.5‘
        }
      ],

实现效果如图:

技术分享图片

重点是后端给的数据格式

以下是data数据是后端接口返回的,其中的数据格式是这样的:


[
    {
    "studentId": "ff808b937f50a33",
    "studentName": "傅xx",
    "studentCode": "91scdsc109",
    "sex": {
      "value": "MALE",
      "name": "男"
    },
    "termName": "2018秋",
    "examDates": [
      "10月",
      "9月28日"
    ],
    "map": {
      "9月28日": [
        {
          "courseName": "听力",
          "score": 6.0
        },
        {
          "courseName": "阅读",
          "score": 7.0
        },
        {
          "courseName": "写作",
          "score": 5.5
        }
      ]
    },
    "courseNames": [
      "听力",
      "阅读",
      "写作",
      "口语",
      "总分"
    ]
  },
  {
    "studentId": "ff80c52801bc",
    "studentName": "陈xx",
    "studentCode": "91edfedf3",
    "sex": {
      "value": "FEMALE",
      "name": "女"
    },
    "termName": "2018秋",
    "examDates": [
      "10月",
      "9月28日"
    ],
    "map": {
      "9月28日": [
        {
          "courseName": "听力",
          "score": 5.5
        },
        {
          "courseName": "阅读",
          "score": 6.0
        },
        {
          "courseName": "写作",
          "score": 5.5
        },
        {
          "courseName": "口语",
          "score": 5.5
        }
      ]
    },
    "courseNames": [
      "听力",
      "阅读",
      "写作",
      "口语",
      "总分"
    ]
  }
]

重点是要以上述datamap里的日期为一组的表头,每组日期包含的是五门课,然后日期是根据数据库查出来的,不确定到底是几个日期,也就是table里这个日期的th是根据数据循环生成的,请仔细看这里给出的数据格式。

使用H5的table实现

template如下:



<table class="table">
            <thead>
                    <tr>
                        <th rowspan="2">序号</th>
                        <th rowspan="2">姓名</th>
                        <th rowspan="2">学号</th>
                        <th rowspan="2">性别</th>
                        <th rowspan="2">学期</th>
                        <th colspan="5" v-for="(it,i) in examDates" :key="i">{{it}}</th>
                    </tr>
                    <tr>
                        <template v-for="itd in examDates">
                          <th v-for="(itc,j) in courseNames" :key="itd+j">{{itc}}</th>
                        </template>
                    </tr>
            </thead>
            <tbody>
                    <tr v-for="(item,index) in studentDataList" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item.studentName}}</td>
                        <td>{{item.studentCode}}</td>
                        <td>{{item.sex.name}}</td>
                        <td>{{item.termName}}</td>
                        <template v-for="examDate in examDates">
                          <template  v-for="(course,j) in courseNames">
                            <td :key="examDate+j">
                              {{initScoreFinal(examDate,course,item.map)}}
                            </td>
                          </template>
                        </template>
                    </tr>
            </tbody>
          </table>

获取到上述后端返回的数据后,对数据稍微处理下:


  data () {
    return {    
      studentDataList: [],
      examDates: [],
      courseNames: []
   },
   created () {
     this.getData ()
   },
   methods: {
    //    
    getData () {
      this.$get( //该方法是封装过的axios
        ‘/list.json‘,
        {
        ....//此处是参数,略
        },
        response => {
          this.examDates = response.data[0].examDates
          this.courseNames = response.data[0].courseNames 
          this.studentDataList = response.data
        }
      )
    },
    initScoreFinal (examDate, course, map) {
      let final = 0
      console.log(‘map:‘ + map)
      for (var it in map) {
        map[it].forEach((item, index, array) => {
          if (it === examDate && item.courseName === course) {
            final = item.score
          }
        })
      }
      return final
    }
}
    

效果如图:

技术分享图片

再吐个槽

在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并,
我们这边的项目需要的这个表格比较变态,结合上述效果图来说吧,图中的表头是先按日期为一列th,这日期的列下分五门课程的子列th,且日期数目不定,可能是一两个日期,可能是多个日期,每个日期下对应的课程也不确定,就像学生上课,每天的课不同,但总共就那五门课,日期列的数目不定,课程数的数据不定,于是,这就很头疼了-_-||

总之长知识了,记录下来。

或许有大神能用iviewuitable组件 能做出来动态列数的表头合并,欢迎来一起谈论办法!!!

来源:https://segmentfault.com/a/1190000016895856




以上是关于vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法的主要内容,如果未能解决你的问题,请参考以下文章

表格表单

使用vue自定义指令合并iview表格单元格

vue多端不同列数

C#二维表头及单元格合并问题

HTMLHTML 表格 ② ( 表头单元格标签 | 表格标题标签 )

HTMLHTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )