vue+element自定义table

需求背景:

1. 一般我们使用element表格长这样,是通过prop数组里的字段渲染数据,每一列就是渲染一个字段的值,如果是一列想要展示多个字段这种模板就不能用

 <template>
   <el-table
     :data="tableData"
     style="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>
 </template>

2. 对于这种需求,我们就可以自定义表格,如下,大概的思路就是在表格行内去渲染我们要展示的元素,多条数据利用for循环

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

3. 实际开发代码如下,需求是一个SDK对应多个APP工程,一个APP工程对应多个调用API,相同类合并单元格

<template>
    <div class="sdk-api-list">
        <!-- 搜索 -->
        <div class="filter-container">
            <span class="pslot">请选择SDK：</span>
            <el-select v-model="sdkCnName" :placeholder="plsdkName" class="filter-item" @change="handleFilter">
                <el-option v-for="item in sdkNameList" :key="item" :label="item" :value="item" />
            </el-select>
        </div>
    

        <!-- 表格 -->
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            :header-cell-style="{ background: '#ccc' }"
        >
            <el-table-column label="SDK" prop="sdkCnName" width="300" header-align="center"> </el-table-column>
            <el-table-column class-name="version-column" label="APP工程" width="" header-align="center">
                <template slot-scope="scope">
                    <div
                        v-for="(sdk, index) in scope.row.callAppLists"
                        :key="index"
                        class="version_inner"
                        :style="{ flex: sdk.sdkApiLists.length }"
                    >
                        <div>{{ sdk.callApp }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column class-name="sdk-column" label="调用API" width="" header-align="center">
                <template slot-scope="scope">
                    <div v-for="(sdk, index) in scope.row.callAppLists" :key="index" class="sdk-container">
                        <div v-for="(sdk1, index1) in sdk.sdkApiLists" :key="index1" class="sdk-inner">
                            {{ sdk1.sdkApiName }}
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

export default {
    data() {
        return {
            tableData: [],
            sdkCnName: '视频录制模块',
            sdkNameList: [
                'sdk1',
                'sdk2'
            ],
            plsdkName: '请选择',
            sdkPieName: '',
            divHeight: 0, //动态高度
            divArr: [],
        };
    },
    components: {
        // sdkpie,
    },
    created() {},
    methods: {
        getSdkApiTime(key) {
            // 清空数据
            this.tableData = [];
            let obj = {
                sdkCnName: key,
            };
            this.$api.getSdkApiTime(obj).then((res) => {
                if (res.message == null) {
                    this.tableData = res.data.list;
                }
            });
        },
        handleFilter(key) {
            // console.log('sdkCnName', this.sdkCnName);
            // this.$refs.sdkPieName.init(key);
            this.getSdkApiTime(this.sdkCnName);
        },
    },
    mounted() {
        this.getSdkApiTime(this.sdkCnName);
    },
};
</script>

<style lang="scss">
.sdk-api-list {
    margin: 10px 20px;
    margin-bottom: 200px;
    .sdk-pie {
        width: 100%;
        height: 500px;
    }

    .el-table thead {
        color: #333;
    }

    table {
        height: 1px;
    }

    tbody .version-column,
    tbody .sdk-column {
        padding: 0 !important;
    }

    tbody .version-column > div {
        padding: 0 !important;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .version-column .version_inner {
        display: flex;
        flex: 1;
        align-items: center;
        padding: 0 10px;
        border-bottom: 1px solid #696969;
    }

    .version-column .version_inner:last-child {
        // border: none;
    }

    tbody .sdk-column > div {
        padding: 0px !important;
    }

    .sdk-column .sdk-inner {
        padding-left: 10px;
    }
    .sdk-column .sdk-container {
        border-bottom: 1px solid #696969 !important;
    }

    .sdk-column .sdk-container,
    .sdk-column .sdk-inner {
        border-bottom: 1px solid #ebeef5;
    }

    .sdk-column .sdk-container:last-child,
    .sdk-column .sdk-inner:last-child {
        border: none;
        // border-bottom: 1px solid red ;
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
        background: #fff !important;
    }
    // 搜索
    .filter-container {
        text-align: left;
        margin-bottom: 10px;
    }
}
</style>

效果图如下

image.png

数据格式如下:

{
    "data": {
        "list": [
            {
                "sdkCnName": "第一列SDK模块",
                "callAppLists": [
                    {
                        "callApp": "APP工程-1",
                        "sdkApiLists": [
                            {
                                "sdkApiName": "调用API1"
                            },
                            {
                                "sdkApiName": "调用API2"
                            }
                        ]
                    },
                    {
                        "callApp": "APP工程-2",
                        "sdkApiLists": [
                            {
                                "sdkApiName": "调用API1"
                            },
                            {
                                "sdkApiName": "调用API2"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}