vue实现树形table表格展示

最新推荐文章于 2025-04-14 11:46:15 发布

小小志秩

最新推荐文章于 2025-04-14 11:46:15 发布

阅读量1.3w

点赞数 1

分类专栏：前端文章标签： TreeTable

本文链接：https://blog.csdn.net/z2014ypd/article/details/89976079

版权

由于element文档实在是太坑了，没有这方面的代码，索性自己查阅了一堆源码之后，才终于在不使用自定义组件的情况下，写出了treeTable的展示界面，以下是代码，仅供参考，有些数据是要联系到后台之类的，我就没给出，所以参考的小伙伴记得自行替换报错的页面代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/4/17
  Time: 15:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>合同付款详情</title>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
	<script src="/static/plugins/vuejs/vue.js" type="text/javascript"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="/static/plugins/elementui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="/static/plugins/elementui/lib/index.js"></script>
	<%--路由--%>
	<script src="/static/plugins/vuejs/vue-router.js" type="text/javascript"></script>
	<%--axios--%>
	<script src="/static/plugins/vuejs/axios.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <%--高级查询--%>
    <el-row style="margin:10px 0px;background-color: #FCFCFC;height:60px;line-height: 60px;border:1px solid #e6e6e6">
        <el-col :span="16" style="padding-left:15px">
            <span style="font-size: 15px">合同编号:</span>
            <el-input size="small" style="width:120px" v-model="queryParam.keyword" placeholder="请输入编号"></el-input>
            <span style="font-size: 15px;margin-left: 10px">付款时间:</span>
            <el-date-picker size="small"
                            v-model="queryParam.beginDate"
                            align="right"
                            type="date" value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                            style="width:130px">
            </el-date-picker>
            到
            <el-date-picker
                    style="width:130px"
                    size="small"
                    v-model="queryParam.endDate"
                    align="right"
                    type="date" value-format="yyyy-MM-dd"
                    placeholder="选择日期">
            </el-date-picker>
        </el-col>
        <el-col :span="26">
            <el-button round size="small" type="primary" icon="el-icon-search" @click="serach">搜索</el-button>
            <el-button round size="small" type="success" icon="el-icon-refresh" @click="clearQueryParam">刷新</el-button>
            <el-button round size="small" type="warning" icon="el-icon-document" @click="handlExport">导出</el-button>
            <el-button round size="small" type="danger" icon="el-icon-delete" @click="DeleteAll">删除</el-button>

        </el-col>
    </el-row>
    <el-table
            v-loading="loading"
            element-loading-text="正在拼命加载，请稍等片刻 ~o( =∩ω∩= )m"
            element-loading-spinner="el-icon-loading" :row-class-name="tableRowStyle"
            element-loading-background="rgba(0, 0, 0, 0.8)" @selection-change="selectMore" size="mini"
            height="330" :data="contractDetails" style="width: 100%" :stripe="true" :border="true">
        <el-table-column align="center" type="selection" prop="id"></el-table-column>
        <el-table-column align="center" label="所属合同编号" width="200" prop="contract.sn">

最低0.47元/天解锁文章