vue.js elemen-ui table 表头怎样进行合并

clipboard.png
使用element table 怎么做成这种样子;表头只有一列的显示,但是数据要显示2列的,请大神指教

阅读 324
评论 2019-09-11 提问
    2 个回答

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单使用情况分析</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/...;>
    <style>

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      background-color: #fff;
      font-size: 14px;
      font-weight: normal;
    }
    table thead>tr th:nth-child(1){
      display: none;
    }

    </style>
    </head>

    <body>
    <div id="app" style="width: 100%;height: 100%;padding:10px 20px;box-sizing: border-box">

    <el-table border :data="tableData" width="100%" > 
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    

    </div>
    <script src="https://cdn.jsdelivr.net/npm/...;></script>
    <script src="https://unpkg.com/element-ui/...;></script>
    <script>

    new Vue({
      el: '#app',
      data: {
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
    
      },
      methods: {
        setColSpan:function(){
          var x = document.getElementsByClassName("el-table__header")[0].rows[0].cells;
          x[1].colSpan = 2;
        },
      },
      mounted() {
        this.$nextTick(function(){
          this.setColSpan();
        })
        
      }
    })

    </script>
    </body>

    </html>
    图片描述

    评论 赞赏 2019-09-12