关于element table 动态表头+动态表头及内容+表格优化+初始化表格+隐藏功能,技术提升请来!
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
本篇文章属于升级版,欢迎交流指教~~
导航:
- 表格头部与内容对不齐
- 表格内容过长
- 处理初始化闪过暂无数据
- 动态表头1
- 动态表头+内容2
- 动态表头及层级表头
1、第一个就是表格头部与内容对不齐的问题了,一直以来都感觉他不算啥大问题,但是完美主义者还是想改。
在App.vue文件中加入:
body .el-table th.gutter{
display: table-cell!important;
}
完美解决。
2、不知道有没有为了表格内容过长占地儿苦恼,有个超简代码来解决:
<el-table border :data="historyData">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="areaName" label="所在行政区">
</el-table-column>
<el-table-column prop="num" label="企业编号" width="90" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="name" label="企业名称" width="90" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="address" label="企业地址" width="90" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="linkMan" label="联系人" width="70">
</el-table-column>
<el-table-column prop="phone" label="移动电话" width="120">
</el-table-column>
<el-table-column label="标签" show-overflow-tooltip>
<template slot-scope="scope">
<span v-for="item in scope.row.tagList">
{{item.name}},
</span>
</template>
</el-table-column>
<el-table-column prop="telephone" label="固定电话" width="90">
</el-table-column>
<el-table-column label="状态" width="60">
<template slot-scope="scope">
<div v-if="scope.row.status==0">启用</div>
<div v-if="scope.row.status==1">停用</div>
</template>
</el-table-column>
<el-table-column label="操作" width="270">
<template slot-scope="scope">
<el-button v-if="scope.row.status==1" icon="el-icon-s-check" @click="handleStop(scope.row)" type="text"
size="small">启用</el-button>
<el-button v-if="scope.row.status==0" icon="el-icon-s-check" @click="handleStop(scope.row)" type="text"
size="small" class="btncolor">停用</el-button>
<el-button icon="el-icon-edit" @click="changeSourceOfPPage(scope.row)" type="text">编辑</el-button>
<el-button v-if="scope.row.outletList.length == 0" icon="el-icon-delete" @click="handleDelete(scope.row)" type="text" style="color:red">删除
</el-button>
<el-button v-if="scope.row.outletList.length!= 0" icon="el-icon-delete" @click="handleDelete2(scope.row)" type="text" style="color:red">删除
</el-button>
<el-button icon="el-icon-info" @click="addTag(scope.row)" type="text" style="color:#FFB427">设置标签</el-button>
</template>
</el-table-column>
</el-table>
找到它了吗? 每错就是 show-overflow-tooltip !
效果图来一张:
3、有没有发现上面的表格代码多了个东西
<template slot="empty">
<p>{{dataText}}</p>
</template>
element表格加载开始时总会弹出 '暂无数据' ,为了避免这个问题,有个解决办法
- 表格中加入以上代码
-
data() {
return {
dataText: "",//表格开始置空}}
4、动态表头1
<el-table border :data="historyData">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="monitorDate" label="时间" width="190">
</el-table-column>
<el-table-column prop="outletName" label="排口名称">
</el-table-column>
<el-table-column prop="outletTag" label="排口标签" width="100" show-overflow-tooltip>
</el-table-column>
<el-table-column v-for="(i,index) in headerData1" :key="index">
<template slot="header" slot-scope="scope">
{{i}}({{headerData2[index]}})
</template>
<template slot-scope="scope">
<span v-if="scope.row.value[index]!=''">{{scope.row.value[index]}}({{scope.row.flag[index]}})</span>
</template>
</el-table-column>
</el-table>
5、动态表头+内容2:
第一个接口获取表头
第二个接口通过表头名字得到值
一切都是element自动处理,厉害了!
效果图:
6、动态表头及层级表头
效果图:
代码:
<el-table v-if="showTable" border :data="historyData">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="monitorDate" label="时间" width="190">
</el-table-column>
<el-table-column prop="outletName" label="排口名称">
</el-table-column>
<el-table-column prop="outletTag" label="排口标签" width="100" show-overflow-tooltip>
</el-table-column>
<el-table-column v-for="(i,index) in headerData_monitor" :key="index" align="center"
:label="i+'('+headerData_unit[index]+')'">
<el-table-column v-for="(j,index2) in top" :label="j" :key="index2">
<template slot-scope="scope">
<span v-if="j=='最大值'">{{scope.row.max[index]}}<span
v-if="scope.row.max[index]!=''">({{scope.row.flag[index]}})</span></span>
<span v-if="j=='最小值'">{{scope.row.min[index]}}<span
v-if="scope.row.min[index]!=''">({{scope.row.flag[index]}})</span></span>
<span v-if="j=='平均值'">{{scope.row.value[index]}}<span
v-if="scope.row.value[index]!=''">({{scope.row.flag[index]}})</span></span>
<span v-if="j=='累计值'">{{scope.row.cou[index]}}<span
v-if="scope.row.cou[index]!=''">({{scope.row.flag[index]}})</span></span>
</template>
</el-table-column>
</el-table-column>
</el-table>
data() {
return {
dataText: "", //表格开始置空
top: ['最大值', '最小值', '平均值', '累计值', ],
historyData: [], //回显到表格的数据
headerData_monitor: [], //参数名
headerData_unit: [], //参数单位
};
},
有用就点个赞再走吧!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献11条内容
所有评论(0)