vue2使用 element表格展开功能渲染子表格

这篇具有很好参考价值的文章主要介绍了vue2使用 element表格展开功能渲染子表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 默认样式vue2使用 element表格展开功能渲染子表格,vue2,前端,javascript,开发语言

修改后 

vue2使用 element表格展开功能渲染子表格,vue2,前端,javascript,开发语言

 样式2

vue2使用 element表格展开功能渲染子表格,vue2,前端,javascript,开发语言

<el-table :data="needDataFollow" border style="width: 100%">
    <el-table-column align="center" label="序号" type="index" width="80" />
    <el-table-column align="center" label="计算方向" prop="direction" />
    <el-table-column align="center" label="需求内容" prop="demand_content" />
    <el-table-column align="center" label="文档/附件">
        <template #default="scope">
            <div class="img">
                <a v-for="(item, index) in scope.row.report" :key="index" :href="item.url"
                    target="_blank">
                    {{ item.name }}
                </a>
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" label="创建时间" prop="createtime" />
    <el-table-column align="center" label="成交时间" prop="bargain_time" />
    <el-table-column align="center" label="成交状态">
        <template #default="scope">
            {{ scope.row.is_bargain === 1 ? '未成交' : '已成交' }}
        </template>
    </el-table-column>
    <el-table-column align="center" label="编辑需求">
        <template #default="scope">
            <img v-if="scope.row.is_bargain == 1" alt="编辑" src="../../assets/edit_icon.png"
                style="cursor: pointer" @click="getNeedEdit(scope.row.id)">
            <span v-else>需求已成交不可修改</span>
        </template>
    </el-table-column>
    <el-table-column align="center" label="添加报价">
        <template #default="scope">
            <el-icon color="red" size="25px"
                @click="get_quotation(scope.row.id, 0, scope.row.direction)">
                <CirclePlusFilled />
            </el-icon>
        </template>
    </el-table-column>
    <el-table-column type="expand" width="140" label="查看报价">
        <template #default="scopes">
            <el-form label-position="right" inline class="demo-table-expand">
                <el-table :data="scopes.row.tea" border
                    style="width:calc(100% - 80px);float:right" id="child_tab">
                    <el-table-column align="center" label="报价编号" prop="number"
                        width="180" />
                    <el-table-column align="center" label="计算老师" prop="teacher_name" />
                    <el-table-column align="center" label="报价" prop="tea_money" />
                    <el-table-column align="center" label="周期" prop="cycle" />
                    <el-table-column align="center" flex label="报价单" width="140">
                        <template #default="scope">
                            <el-button :disabled="scope.row.amount_price == '0.00'"
                                type="success">生成报价单</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="修改报价">
                        <template #default="scope">
                            <el-button type="success"
                                @click="get_quotation(scope.row.id, 1)"
                                :disabled="scopes.row.is_bargain == 2">
                                修改报价
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </template>
    </el-table-column>
</el-table>

模拟数据

needDataFollow: [
            {
                "bargain_time": "",
                "id": 7,
                "direction": "项目",
                "demand_content": "777",
                "report": [],
                "is_bargain": 1,
                "createtime": "2024-01-16",
                "tea": [
                    {
                        "id": 6,
                        "teacher_id": "555",
                        "teacher_name": "名字",
                        "cycle": "10",
                        "tea_money": "10.00",
                        "number": "PHAD-BJ-20240116-01"
                    }
                ]
            },
]

修改默认样式 文章来源地址https://www.toymoban.com/news/detail-797065.html

// 父表格颜色
/deep/.el-table th.el-table__cell {
    background: #596980 !important;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
}
// 子表格颜色
#child_tab {
    /deep/ th {
        background-color: #f0f2fd !important;
        color: #000 !important;
    }
}

// 展开向右边
/deep/ .el-table__expand-icon {
    color: #29b4ff;
    font-size: 15px;

    &::before {
        content: "展开";
    }

    .el-icon svg {
        transform: rotate(0deg);
        transition: 0.3s;
    }
}

// 收起向下边
/deep/ .el-table__expand-icon--expanded {
    transform: rotate(0);

    &::before {
        content: "收起";
    }

    .el-icon svg {
        transform: rotate(90deg);
        transition: 0.3s;
    }
}

到了这里,关于vue2使用 element表格展开功能渲染子表格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2+element-ui,el-aside侧边栏容器收缩与展开

    一、概览 实现效果如下: 二、项目环境 1、nodejs版本 2、npm版本 3、vue脚手架版本 三、创建vue项目 1、创建名为vuetest的项目 选择Default([Vue2] babel,eslint)    2、切换到项目目录,启动项目   3、使用浏览器预览  http://localhost:8080/ 四、使用Visual Studio Code打开项目 1、查看源码

    2023年04月22日
    浏览(39)
  • vue2的 element 表格单元格合并

    template div el-table show-summary :summary-method=\\\"getSummaries\\\" :span-method=\\\"objectSpanMethod\\\" :data=\\\"tableData\\\" row-key=\\\"id\\\" ref=\\\"tableDom\\\" border el-table-column label=\\\"序号\\\" width=\\\"55\\\" align=\\\"center\\\" template slot-scope=\\\"scope\\\"{{ scope.$index + 1 }}/template /el-table-column el-table-column prop=\\\"name\\\" label=\\\"分类\\\" align=\\\"center\\\"/el-table-column el

    2024年02月17日
    浏览(42)
  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(55)
  • Vue2 Element 表格&表单 我惯用的写法

    我需要整理一下表单验证和表格, 我们的项目里大量的使用了它们, 我应该形成一个模式去套用而不是像现在这样边构思边写. 还好后端返回的数据通常规范好用, 不是一些奇形怪状的结构. 表头创建, 最少需要知道表头要写的字( label )和该表头下该列出何种数据, 大部分时候这

    2023年04月15日
    浏览(34)
  • vue2&Element-ui实现表格单元格合并

    由于项目需要实现单元格合并目前只是单页没有做分页处理先上效果图 看下数据结构 Element table提供的api arraySpanMethod columnIndex=0表示从第一列开始 rowIndex表示需要操作的行数 同济医院加上合计有12行从0开始=11 判断条件是rowIndex余12===0 我们打印一下 或者改成 表示从0开始到1

    2024年02月12日
    浏览(46)
  • 【分页表格】Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)

    这篇文章,主要介绍Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)。 目录 一、分页表格 1.1、运行效果 1.2、运行环境 1.3、案例代码

    2024年02月11日
    浏览(59)
  • Vue2.0+element-ui实现表格的增删查改

    vue2做了个表格的demo,有增删改查的功能,记录一下,喜欢就点个赞收藏一下吧~ 效果: 1.主文件list-page.vue 列表页 2.弹窗页面(新增/编辑公用一个弹窗页面)

    2024年02月10日
    浏览(51)
  • vue+Element UI Table表格动态渲染表头内容及操作按钮

    循环表格头信息数组 封装操作组件并引入表格文件内 配置表头信息数组及添加操作事件

    2024年02月13日
    浏览(71)
  • Vue结合element-ui实现导航菜单展开收缩小功能

    1. 先上个效果图    这里我把控制菜单收缩的放在中间了,是可以随便调整的。  2. 问题思路想法  ① 首先是布局,这就是个很经典的后台管理系统的容器页面,这里分为上下结构,上面一般放些系统logo、 登录的用户信息,还有一些小功能等等。然后下面又分为左右结构,

    2024年02月16日
    浏览(59)
  • VUE2/3:element ui table表格的显隐列(若依框架)

    若依框架自带一个组件,封装了关于表格,展示和隐藏表格列的功能; 使用效果就是这样的,在表格上面,三个框,从左到右分别是隐藏上面搜索,刷新列表,和显隐列的功能;    一、下面的代码放到RightToolbar/index.vue下, 二、main.js文件里封装 放到main.js全局挂载,使用的

    2024年02月02日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包