Element UI Table表格样式调整

  • Post author:
  • Post category:其他




调整Element UI Table表格的样式

最终效果: 单元格合并,样式调整

在这里插入图片描述



模拟后端返回数据

{
              teamName: '小组一',
              outsourceFlag: '是',
              adminName: '张三',
              testValues: [
                {
                  code: '001',
                  value: '测试一'
                },
                {
                  code: '002',
                  value: '测试二'
                },
                {
                  code: '003',
                  value: '测试三'
                }
              ],
              taskTypes: [
                {
                  code: '001',
                  value: '任务一'
                },
                {
                  code: '002',
                  value: '任务二'
                },
                {
                  code: '003',
                  value: '任务三'
                },

              ],

              caseTypes: [
                {
                  code: '001',
                  value: '吃'
                },
                {
                  code: '002',
                  value: '喝'
                },
                {
                  code: '0023',
                  value: '玩'
                },

              ],
            },
              {
                teamName: '小二',
                outsourceFlag: '是',
                adminName: '李四',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },

                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '任务一'
                  },
                ],
                caseTypes: [
                  {
                    code: '001',
                    value: '玩'
                  },

                ],
              },
              {
                teamName: '小组一',
                outsourceFlag: '是',
                adminName: '张三',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }
                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],

                caseTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],
              },],



CSS代码

>>> .has-gutter tr>th:nth-child(2){
  padding-left: 10px !important;
}

>>> .el-table--enable-row-transition .el-table__body td:nth-child(2){
  padding-left: 10px !important;
}
>>> .has-gutter tr>th:nth-last-child(2){
  text-align:center;
}

>>> .el-table--enable-row-transition .el-table__body td:last-child{
  padding-left: 10px !important;
}

 >>> .el-table--enable-row-transition .el-table__body td{
   padding:0;
 }
 >>> .cell .el-tooltip{
   padding:0 !important;
 }
 >>> .el-table .cell{
   padding: 0 !important;
 }
 .annotation-rs:last-child{
   border:0;
 }

 .annotation-rs{
   margin-top: 5px;
   border-bottom: 1px solid #EBEEF5;
 }



全部代码实现

<template>
    <div class="app-container">
          <el-row>
            <el-col :span="24" class="warp-table" style="margin-top:10px">
              <el-table ref="multipleTable" :border="true" cellspacing="0" :data="tableData" stripe
                        style="width: 100%" id="deliveryTeamTable">
                <el-table-column type="index" label="序号" width="60" align="center" header-align='center'>
                </el-table-column>
                <el-table-column prop="teamName" label="小组名称" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="outsourceFlag" label="是否启用" align="center" width="100px" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="adminName" align="center" label="小组管理员" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="testValues" label="权限类型" align="center" width="100px"
                                 :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div class="annotations">
                      <div class="annotation-rs"
                           v-for="(item,index) in scope.row.testValues" :key="index">
                        <span>{{item.value}}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="taskType" label="任务类型" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div class="annotations">
                      <div class="annotation-rs"
                           v-for="(item,index) in scope.row.taskTypes" :key="index">
                        <span>{{item.value}}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="caseType" label="负责内容" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div class="annotations">
                      <div class="annotation-rs"
                           v-for="(item,index) in scope.row.caseTypes" :key="index">
                        <span>{{item.value}}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="90px">
                  <template slot-scope="scope">
                    <a @click="editInfo(scope.row.id)">编辑</a>
                    <a @click="delInfo(scope.row.id)">删除</a>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
    </div>
</template>

<script>

export default {

    data() {
        return {
            tableData: [ {
              teamName: '小组一',
              outsourceFlag: '是',
              adminName: '张三',
              testValues: [
                {
                  code: '001',
                  value: '测试一'
                },
                {
                  code: '002',
                  value: '测试二'
                },
                {
                  code: '003',
                  value: '测试三'
                }
              ],
              taskTypes: [
                {
                  code: '001',
                  value: '任务一'
                },
                {
                  code: '002',
                  value: '任务二'
                },
                {
                  code: '003',
                  value: '任务三'
                },

              ],

              caseTypes: [
                {
                  code: '001',
                  value: '吃'
                },
                {
                  code: '002',
                  value: '喝'
                },
                {
                  code: '0023',
                  value: '玩'
                },

              ],
            },
              {
                teamName: '小二',
                outsourceFlag: '是',
                adminName: '李四',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },

                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '任务一'
                  },
                ],
                caseTypes: [
                  {
                    code: '001',
                    value: '玩'
                  },

                ],
              },
              {
                teamName: '小组一',
                outsourceFlag: '是',
                adminName: '张三',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }
                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],

                caseTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],
              },],
        }
    },
    methods: {

    }
}
</script>

<style scoped>
>>> .has-gutter tr>th:nth-child(2){
  padding-left: 10px !important;
}

>>> .el-table--enable-row-transition .el-table__body td:nth-child(2){
  padding-left: 10px !important;
}
>>> .has-gutter tr>th:nth-last-child(2){
  text-align:center;
}

>>> .el-table--enable-row-transition .el-table__body td:last-child{
  padding-left: 10px !important;
}

 >>> .el-table--enable-row-transition .el-table__body td{
   padding:0;
 }
 >>> .cell .el-tooltip{
   padding:0 !important;
 }
 >>> .el-table .cell{
   padding: 0 !important;
 }
 .annotation-rs:last-child{
   border:0;
 }

 .annotation-rs{
   margin-top: 5px;
   border-bottom: 1px solid #EBEEF5;
 }
</style>



版权声明:本文为qq_41011920原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。