element 表格table纵横双列表头斜线样式处理和多级表头循环

最新推荐文章于 2024-08-08 10:24:19 发布

Enno.Z

最新推荐文章于 2024-08-08 10:24:19 发布

阅读量5.7k

点赞数 5

分类专栏： element 文章标签： element 多级表头纵横双表头表格斜线css样式

本文链接：https://blog.csdn.net/weixin_42717027/article/details/102832033

版权

element 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

element 表格table纵横双列表头斜线样式处理和多级表头循环

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-card class="doubleThTable">
     <el-table :data="tableData.Data"
                  style="width: 100%;margin-top:5px;"
                  border>
          <el-table-column
            label="项目"
            align="right"
            width="150">
            <el-table-column
              prop="name"
              label="事项"
              width="150">
            </el-table-column>
          </el-table-column>
          
            <el-table-column v-for="(col,i) in columnList"
            :key="i" :prop="col.prop" :label="col.label"
            align="center">
              <template v-if="col.children">
                <el-table-column v-for="(item, index) in col.children"
                  :key="index"
                  :prop="item.prop" :label="item.label">
                  </el-table-column>
                </template>
            </el-table-column>
            </el-table>
          </el-card>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
      return {
        columnList: [
        {
          prop: 'oneToFour',
          label: '1-4'
        },
        {
          prop: 'fiveToSix',
          label: '5-6'
        },
        {
          prop: 'sevenToNine',
          label: '7-9'
        },
        {
          prop: 'noLevel',
          label: '未构级'
        },
        {
          prop: 'highLevel',
          label: '存在生活自理障碍人数'
        },
        {
          label: '变动情况',
          children: [
            {
              prop: 'noChange',
              label: '无变动'
            }, {
              prop: 'littleChange',
              label: '小极差变动'
            }, {
              prop: 'largeChange',
              label: '大极差变动'
            }
          ]
        },
        {
          label: '通过情况',
          children: [
            {
              prop: 'passNum',
              label: '通过'
            }, {
              prop: 'noPassNum',
              label: '未通过'
            }
          ]
        }
      ],
      tableData: {
        Data: [
          {
            name: '劳动能力',

            oneToFour: '111',
            fiveToSix: '111',
            sevenToNine: '111',
            noLevel: '111',
            highLevel: '111',
            noChange: '111',
            littleChange: '111',
            largeChange: '111',
            passNum: '111',
            noPassNum: '111'

          },
          {
            name: '劳动能力复查鉴定',

            oneToFour: '111',
            fiveToSix: '111',
            sevenToNine: '111',
            noLevel: '111',
            highLevel: '111',
            noChange: '111',
            littleChange: '111',
            largeChange: '111',
            passNum: '111',
            noPassNum: '111'

          },
          {
            name: '劳动能力再次鉴定',

            oneToFour: '111',
            fiveToSix: '111',
            sevenToNine: '111',
            noLevel: '111',
            highLevel: '111',
            noChange: '111',
            littleChange: '111',
            largeChange: '111',
            passNum: '111',
            noPassNum: '111'

          }
        ],
        total: 0
      },
        }
    },

    methods: {
      
    }
    })
  </script>
  <style scoped>
     // 表格斜线样式 注意：为保持其他页面用的表格样式，style 加scoped属性
  .doubleThTable .el-table thead.is-group tr:first-of-type th:first-of-type{
    border-bottom: none;
  }
  .doubleThTable .el-table thead.is-group tr:first-of-type th:first-of-type:before{
    content: '';
    position: absolute;
    width: 1px;
    height: 87px; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0;
    left: 0;
    background-color: grey;
    opacity: 0.2;
    display: block;
    transform: rotate(-52deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
  }
  .doubleThTable .el-table thead.is-group tr:last-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 115px; /*这里需要自己调整，根据td的宽度和高度*/
    bottom: 0;
    right: 0;
    background-color: grey;
    opacity: 0.2;
    display: block;
    transform: rotate(-51deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: bottom;
  }
  </style>
</html>