0

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

9月11日提问

查看全部 2 个回答

0

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

推荐答案

0

已采纳

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

推广链接