如何使用Element UI实现一个单元格2个分割线

晨曦_子画 2024-06-21 16:00:04

如何使用element UI 做如图的表格样式。一个单元格2个分割线求完整代码

...全文

794 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

清风明月9987321 2024-06-28

打赏
举报

为了使用Element UI实现如图所示的带有两个分割线的表格样式，可以通过嵌套表格的方式来实现。下面是一个完整的代码示例，使用Vue和Element UI来创建这样的表格。

首先，确保你已经安装了Element UI和Vue。


npm install element-ui
npm install vue

然后，创建一个Vue项目，并在项目中使用以下代码：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-table :data="tableData" border>
      <el-table-column label="方案" width="150">
        <template slot-scope="scope">
          <div class="cell-with-lines">
            <div class="line-top-left"></div>
            <div class="line-bottom-right"></div>
            方案
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量" width="150">
        <template slot-scope="scope">
          <div class="cell-with-lines">
            <div class="line-top-left"></div>
            <div class="line-bottom-right"></div>
            数量
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="元件" width="150"></el-table-column>
      <el-table-column prop="spec" label="表1" width="150"></el-table-column>
      <el-table-column prop="light" label="灯" width="150"></el-table-column>
      <el-table-column prop="button" label="按钮" width="150"></el-table-column>
    </el-table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          tableData: [
            { unit: '111×111', spec: 'Ø23', light: 'Ø23', button: 'Ø23' }
          ]
        }
      }
    })
  </script>
  <style>
    .cell-with-lines {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .line-top-left {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 1px;
      background: black;
      transform: rotate(-45deg);
      transform-origin: left top;
    }

    .line-bottom-right {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50%;
      height: 1px;
      background: black;
      transform: rotate(-45deg);
      transform-origin: right bottom;
    }
  </style>
</body>
</html>