VUE 实现element 的 el-table 的自定义表格需求（双列内容不同)

最新推荐文章于 2024-10-12 09:48:23 发布

元気欣

最新推荐文章于 2024-10-12 09:48:23 发布

阅读量6k

点赞数 4

分类专栏： vue 文章标签： vue vue.js html5 css3 javascript

本文链接：https://blog.csdn.net/kkk_xxx/article/details/108263222

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近项目有个需求针对到el-table这个组件。自己也是第一次这样来使用，特写下这两篇文章，算是当做记录吧！如果是从第一次使用elementUI的话，可以移步另一篇文章作为参考~

产品需求样式

在这里插入图片描述

效果图

在这里插入图片描述

技术点

既想用elementUI的table样式和功能，简单的<tr><th><td>是不能满足的
在使用element-ui的el-table组件时，最普遍的做法就是使用el-table-column；其中columns对应el-table-column Attributes，props对应el-table Attributes，el-table原有事件照原先用法使用即可；
在需要用到Scoped slot时，需要创建el-table-column，并在其中加入template标签（用法：/…/）
插槽使用具名插槽和作用域插槽slot=“header”和slot-scope=“scope”

源码

<div class="main_top">
            <img src="@/assets/big/Basic_Info.png" alt />
            基本信息
        </div>
        <el-table :data="tableData"  border style="width: 100%; margin-top: 20px"
            :header-cell-style="{'background':'rgba(0,0,0,0)','font-weight':'500'}" >
            <el-table-column prop="name" label="优惠券品类" width="240" ></el-table-column>
            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <span>TEST</span>
                </template>
                <template slot-scope="scope">
                    <span>{{scope.row.value}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="names" label="优惠券名称" width="240"></el-table-column>
            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <span >TEST</span>
                </template>
                <template slot-scope="scope">
                    <span>{{scope.row.values}}</span>
                </template>
            </el-table-column>
        </el-table>

mounted() {
            this.tableDatas = [];
            this.tableData = [];
             this.tableData.push({
                    name: "优惠券类型",
                    value:'TEST',  //注意值为value
                    names: "优惠券说明",
                    values:'TEST',  //注意值为values
                }, {
                    name: "优惠内容",
                    value:'TEST',
                    names: "授权用户",
                    values:'TEST',
                },
                 {
                    name: "可用时间",
                    value:'TEST',
                }
                );
}

注意点

两列数据值为value和values，否则会出现两列四行渲染的效果
取消首行样式可参考:header-cell-style="{'background':'rgba(0,0,0,0)','font-weight':'500'}"或者:header-cell-style="{'background':'rgba(0,0,0,0)'}"