Avue和Element-UI动态三级表头的实现
目录
- Avue配置方式
- Element-UI三级表头动态写法
需求场景： 业务方希望有表格可以体现员工的考勤信息，要具体到上午下午，统计司机上下班打卡所产生的数据。产品提出想做成三级表头根据页面查询条件的年月去动态生成表格的表头。三级分别是月份日期，对应的星期，以及每天的上午以及下午。
效果如下：
Avue配置方式
通过对avue-crud组件的option的配置如下：
{
label: `${$this.month}月${$this.dateList[0].ri}日`, // 月份
headerAlign: 'center',
children: [
{
label: `星期${$this.dateList[0].xq}`,
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'oneAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.oneAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'onePmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.onePmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
在data中声明需要的变量以及获取每个月天数以及对应星期的方法
data(){
return {
dateList: [], // 日期list
month: 0, // 选中的月份
dayNum: 0 // 选中月的天数
}
}
created(){
this.montInfo(GetYearLastMonth())
// 当前月的天数
const arr = GetYearLastMonth().split('-')
this.month = parseInt(arr[1])
this.dayNum = this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
}
methods(){
// 月日以及对应的星期
montInfo(res) {
/**
* 获取一个月多少天，并获取月初星期几
*/
const daxier = ['一', '二', '三', '四', '五', '六', '日'];
const date = res ? new Date(res) : new Date()
const y = date.getFullYear()
const m = date.getMonth() + 1
var date2 = new Date(y, m, 0)
var rq = date2.getDate() // 日 本月最后一天
var xq = date2.getDay(); // 星期 本月第一天星期几 new Date(0).getDay()
var rq2 = rq % 7
if (rq2 === 0) {
xq = rq2 + 1
} else {
if (rq2 > xq) xq += 7
xq = xq - rq2
}
var data = [];
for (var i = 1; i <= rq; i++) {
data.push({
'ri': i,
'xq': daxier[xq]
})
xq = (++xq === 7) ? 0 : xq
}
this.dateList = data
},
// 获取选中月的天数
dayNumFn(year, month) {
return new Date(year, month, 0).getDate()
},
}
根据查询条件去切换表头
{
label: '年月',
search: true,
hide: true,
searchPlaceholder: '请选择年月',
searchClearable: false,
prop: 'yearMonth',
type: 'month',
// 日期组件格式化
format: 'yyyy-MM', // 展示值
// 单元格格式化
valueFormat: 'yyyy-MM', // value
searchDefault: GetYearLastMonth(),
pickerOptions: {
disabledDate: (time) => {
return time.getTime() > new Date(GetYearLastMonth()).getTime()
}
},
// 查询条件月份切换的同事重新渲染表头
change(value) {
// 当前月的天数
$this.montInfo(value.value)
const arr = value.value.split('-')
$this.month = parseInt(arr[1])
$this.dayNum = $this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
}
},
因为不同的月份日期有不同，比如2月只有28天而1月有31天。所以大于28的日期需要单独处理一下
{
label: $this.dayNum > 28 ? `${$this.month}月${$this.dateList[28].ri}日` : '',
headerAlign: 'center',
hide: $this.dayNum < 28,
children: [
{
label: $this.dayNum > 28 ? `星期${$this.dateList[28].xq}` : '',
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'twentyNineAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.twentyNineAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'twentyNinePmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.twentyNinePmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
{
label: $this.dayNum > 28 ? `${$this.month}月${$this.dateList[29].ri}日` : '',
headerAlign: 'center',
hide: $this.dayNum < 30,
children: [
{
label: $this.dayNum > 28 ? `星期${$this.dateList[29].xq}` : '',
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'thirtyAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'thirtyPmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyPmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
{
label: $this.dayNum === 31 ? `${$this.month}月${$this.dateList[30].ri}日` : '',
headerAlign: 'center',
hide: $this.dayNum !== 31,
children: [
{
label: $this.dayNum === 31 ? `星期${$this.dateList[30].xq}` : '',
headerAlign: 'center',
children: [
{
label: '上午',
prop: 'thirtyOneAmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyOneAmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
},
{
label: '下午',
prop: 'thirtyOnePmAttendance',
headerAlign: 'center',
props: { label: 'name', value: 'code' },
type: 'select',
dicData: $this.attendanceTypeList,
formatter: (row, value, label, column) => {
try {
let satData = ''
$this.attendanceTypeList.find((item) => {
if (item.code === row.thirtyOnePmAttendance) {
satData = item.name
}
})
return satData
} catch (e) {
console.log(e)
}
}
}
]
}
]
},
Element-UI三级表头动态写法
element-ui的写法相对简单一些，因为配置项没办法进行遍历渲染。
template里面的写法
<el-table
:data="tableData"
style="width: 100%" >
<el-table-column
prop="month"
label="月份"
width="150"
header-align="center">
</el-table-column>
<!-- 这里使用遍历的形式来进行渲染 -->
<template v-for="(item,index) in dateList" >
<el-table-column :label="`${month}月${item.ri}日`" header-align="center" :key="'date' + index">
<el-table-column header-align="center" :label="`星期${item.xq}`" >
<el-table-column header-align="center" :prop="item.sw" label="上午" width="120" ></el-table-column>
<el-table-column header-align="center" :prop="item.xw" label="下午" width="120" ></el-table-column>
</el-table-column>
</el-table-column>
</template>
</el-table>
data中还是声明变量，methods中还是应用和上面类似的方法
data(){
return {
dateList: [], // 日期list
month: 0, // 选中的月份
dayNum: 0, // 选中月的天数
}
}
created() {
this.montInfo(GetYearLastMonth())
// 当前月的天数
const arr = GetYearLastMonth().split('-')
this.month = parseInt(arr[1])
this.dayNum = this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
},
methods: {
// 月日以及对应的星期
montInfo(res) {
/**
* 获取一个月多少天，并获取月初星期几
*/
const daxier = ['一', '二', '三', '四', '五', '六', '日'];
// 这里是每个上午下午展示为不同的变量
const amArr = ['oneAmAttendance', 'twoAmAttendance', 'threeAmAttendance', 'fourAmAttendance', 'fiveAmAttendance', 'sixAmAttendance', 'sevenAmAttendance', 'eightAmAttendance', 'nineAmAttendance', 'tenAmAttendance', 'elevenAmAttendance', 'twelveAmAttendance', 'thirteenAmAttendance', 'fourteenAmAttendance', 'fifteenAmAttendance', 'oneAmAttendance', 'twoAmAttendance', 'threeAmAttendance', 'fourAmAttendance', 'fiveAmAttendance', 'sixAmAttendance', 'sevenAmAttendance', 'eightAmAttendance', 'nineAmAttendance', 'tenAmAttendance', 'elevenAmAttendance', 'twelveAmAttendance', 'thirteenAmAttendance', 'fourteenAmAttendance', 'fifteenAmAttendance', 'sixteenAmAttendance', 'seventeenAmAttendance', 'eighteenAmAttendance', 'nineteenAmAttendance', 'twentyAmAttendance', 'twentyOneAmAttendance', 'twentyTwoAmAttendance', 'twentyThreeAmAttendance', 'twentyFourAmAttendance', 'twentyFiveAmAttendance', 'twentySixAmAttendance', 'twentySevenAmAttendance', 'twentyEightAmAttendance', 'twentyNineAmAttendance', 'thirtyAmAttendance', 'thirtyOneAmAttendance']
const pmArr = [
'onePmAttendance', 'twoPmAttendance', 'threePmAttendance', 'fourPmAttendance', 'fivePmAttendance', 'sixPmAttendance', 'sevenPmAttendance', 'eightPmAttendance', 'ninePmAttendance', 'tenPmAttendance', 'elevenPmAttendance', 'twelvePmAttendance', 'thirteenPmAttendance', 'fourteenPmAttendance', 'fifteenPmAttendance', 'onePmAttendance', 'twoPmAttendance', 'threePmAttendance', 'fourPmAttendance', 'fivePmAttendance', 'sixPmAttendance', 'sevenPmAttendance', 'eightPmAttendance', 'ninePmAttendance', 'tenPmAttendance', 'elevenPmAttendance', 'twelvePmAttendance', 'thirteenPmAttendance', 'fourteenPmAttendance', 'fifteenPmAttendance', 'sixteenPmAttendance', 'seventeenPmAttendance', 'eighteenPmAttendance', 'nineteenPmAttendance', 'twentyPmAttendance', 'twentyOnePmAttendance', 'twentyTwoPmAttendance', 'twentyThreePmAttendance', 'twentyFourPmAttendance', 'twentyFivePmAttendance', 'twentySixPmAttendance', 'twentySevenPmAttendance', 'twentyEightPmAttendance', 'twentyNinePmAttendance', 'thirtyPmAttendance', 'thirtyOnePmAttendance'
]
const date = res ? new Date(res) : new Date()
const y = date.getFullYear()
const m = date.getMonth() + 1
var date2 = new Date(y, m, 0)
var rq = date2.getDate() // 日 本月最后一天
var xq = date2.getDay(); // 星期 本月第一天星期几 new Date(0).getDay()
var rq2 = rq % 7
if (rq2 === 0) {
xq = rq2 + 1
} else {
if (rq2 > xq) xq += 7
xq = xq - rq2
}
var data = [];
for (var i = 1; i <= rq; i++) {
data.push({
'ri': i,
'xq': daxier[xq]
})
xq = (++xq === 7) ? 0 : xq
}
data.map((item, index) => {
item.sw = amArr[index]
item.xw = pmArr[index]
})
this.dateList = data
},
// 获取选中月的天数
dayNumFn(year, month) {
console.log(new Date(year, month, 0).getDate())
return new Date(year, month, 0).getDate()
}
}
element-ui渲染的效果
到此这篇关于Avue和Element-UI动态三级表头的实现的文章就介绍到这了,更多相关Element 动态三级表头内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
element表格去掉表头的实现方法
文档提示用属性show-header <el-table :data="tableData1" :span-method="arraySpanMethod" border :show-header="status" <el-table-column prop="lable" label="" width="180"> </el-table-column> /
-
vue+element-ui动态生成多级表头的方法
vue+element html配置: <div id="table">{{tableData}} <el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"> <el-table-column v-for='item in tableConfig' :label="item.label&qu
-
ElementUI表格中添加表头图标悬浮提示
本文主要介绍了ElementUI表格中添加表头图标悬浮提示,分享给大家,具体如下: <el-table-column label="操作" fixed="right" :render-header="tableAction" width="120"> <!--scope 即为 userList scope.row即为当前行数据 --> <template slot-scope="scop
-
vue element 中的table动态渲染实现（动态表头）
通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头.通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据. 子组件table中template模板 <el-table :data="this.tableData" height="400px" max-height="400px" size="small" row-class-name="row" cell
-
vue elementUI table 自定义表头和行合并的实例代码
最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头 代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header
-
Element实现表格嵌套、多个表格共用一个表头的方法
一.分析需求 这里先上一张图说明 需求 : 根据后端返回的数据 ( res 是一个数组,它的元素是一个对象,对象里面的 ext 属性是一个对象,它又包含了, default . free 和 pay 三个属性,且这三个都是数组格式.): 渲染出一个这样子的 表格 : res 数据: res 的每一个元素的直接属性 name (即为邮费模板名称,比如成都运费模板), res 的 ext 属性下的三个数组 default . free . pay ,每一个数组要大的一行(这一行中,第一列是运送到的地
-
Vue+Element ui 根据后台返回数据设置动态表头操作
由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="
-
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
render-header render-header在官方文档中的介绍是这样的: 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) - - 修改列标题样式 1.在列标题后面加一个图标. 以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下: <template> <el-table :data="ta
-
Element表格表头行高问题解决
目录 前言 一.问题原因 二.解决方法 Vue 修改 elementUI table tr th 的高度,以及背景颜色 前言 在最近一个项目的后台管理系统中,写前端界面时用到了ElementUI,但是发现导入数据表格之后表头的高度一直很高,如下图所示: 在网页上搜索了很多的解决办法,都没有作用.后来折磨了一段时间后解决了这个问题,在此进行记录. 提示:以下是本篇文章正文内容,下面案例可供参考 一.问题原因 在网页中检查代码时发现没有style来设置表格表头的高度,只有调整.el-main中的li
-
Avue和Element-UI动态三级表头的实现
目录 Avue配置方式 Element-UI三级表头动态写法 需求场景: 业务方希望有表格可以体现员工的考勤信息,要具体到上午下午,统计司机上下班打卡所产生的数据.产品提出想做成三级表头根据页面查询条件的年月去动态生成表格的表头.三级分别是月份日期,对应的星期,以及每天的上午以及下午. 效果如下: Avue配置方式 通过对avue-crud组件的option的配置如下: { label: `${$this.month}月${$this.dateList[0].ri}日`, // 月份 heade
-
element ui 表格动态列显示空白bug 修复方法
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c
-
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
需要用到中间件的方式,这样就可以实现了我们想要的方式 publish-center.vue <template> <router-view></router-view> </template> <script> export default { } </script> <el-menu :default-active="$route.path" class="el-menu-vertical-dem
-
动态实现element ui的el-table某列数据不同样式的示例
问题描述 在饿了么ui的框架中,输入数据el-form,输出数据el-table.有时候产品想让枯燥的表格来点动态的样式,比如不同的内容展示不同的样式,对于这个需求,其实方式有很多种,本文列举两种,以供参考. 实现方式一 效果图如下 代码如下 <template> <div id="app"> <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色.蜀国黑色.吴国蓝色) --> <el-table :data="tabl
-
vue + element动态多表头与动态插槽
目录 一.需求 二.效果 三.全部代码 一.需求 满足用户自行配置表格,减少对系统代码维护量. 二.效果 表头json: 说明:scope(字段名可另取)为是否对该列开启插槽.有propChildren包含多级表头. tableHead: [{ key: '1', label: '日期', prop: 'date', width: '100', headerAlign: 'center', align: 'center', scope: false, sortable: true }, { ke
-
解决element ui cascader 动态加载回显问题
elementui是基于vue2.0的组件库,专为开发人员.设计人员而设计的:可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法. props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了.只要重新加载下cascader组件就行. <el-cascader v-if="isShowAddressInfo&
-
Element实现动态表格的示例代码
目录 [代码背景] [代码实现] #1# -> 代码复用的基础是你需要一个可复用的组件 #2# -> 在展示页面使用动态表格组件 #3# -> 如何给动态表格根据需求动态添加序号列/索引列 [代码背景] 有这样一个业务需求场景,有大概十几张表归属于某个类别,用户希望在同一个页面,通过选择不同的查询指标展示不同的表格,这些表的表头样式类似但是又不完全相同,怎么做呢? 到目前为止所有基于Element UI的表格样式都是直接在页面写死的,像官方这样: <el-table :data=&
-
element ui table 增加筛选的方法示例
网上大部分都可以增加筛选功能,但没有找到下列这种情况. 若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则. <el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-met
-
解决Vue的项目使用Element ui 走马灯无法实现的问题
1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :