element table 表格头部合并

蓝色精灵aiwa

于 2024-06-05 14:31:32 发布

阅读量161

点赞数 3

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_42199383/article/details/139471597

版权


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./table2.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #vue_container {
            width: 100%;
            height: 100%;
            background-color: rgb(235, 237, 241);
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="vue_container">
        <el-table :data="tableData" stripe border style="width: 100%" :header-cell-style="headerCellStyle">
            <el-table-column prop="date" label="日期" width="180" align="center">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180" align="center">
            </el-table-column>
            <el-table-column prop="province" label="地址" width="180" align="center">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column prop="count" label="数字" align="center"></el-table-column>
        </el-table>
    </div>
</body>

</html>

var VueContainer = null;
$(function () {
  VueContainer = new Vue({
    el: "#vue_container",
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: "上海",
          address: '上海市普陀区金沙江路 1518 弄',
          count: 1
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: "上海",
          address: '上海市普陀区金沙江路 1517 弄',
          count: 1
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: "上海",
          address: '上海市普陀区金沙江路 1519 弄',
          count: 1
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: "上海",
          address: '上海市普陀区金沙江路 1516 弄',
          count: 1
        }]


      }
    },
    methods: {
      headerCellStyle({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          if (column.property == 'province') {
            this.$nextTick(() => {
              document.getElementsByClassName(column.id)[0].setAttribute('colSpan', 2)
            })
          }
        }


      }
    }
  })

})

效果图：