问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
problem
    241020

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

    vue.jselement-ui
    阅读 3.3k
    2 个回答
    得票最新
    头像
    problem
      241020
      ✓ 已被采纳

      <!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>
      图片描述

      头像
      liuxliang
        8917

        用表格的合并功能是可以做的，我用多级表头和合并实现这种，你这种貌似不好实现
        clipboard.png

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题