Ant Design Vue table中列超长显示...并加提示语的实例
程序员文章站
2022-06-25 11:47:57
我就废话不多说了，大家还是直接看代码吧~
我就废话不多说了，大家还是直接看代码吧~
<template>
<a-row class="a-left">
<a-row>
<p class="a-title">今日考勤状况</p>
<a-row type="flex" justify="space-around">
<a-col :span="4" class="block">
<h3>出勤状况总览</h3>
{{ cntall.cnt }}/
<span style="color: #f0ff00">{{ cntall.exceptioncount }}</span>
</a-col>
<a-col :span="4" class="block">
<h3>管理人员出勤状况</h3>
{{ cntleader.cnt }}/
<span style="color: #f0ff00">{{ cntleader.exceptioncount }}</span>
</a-col>
<a-col :span="4" class="block">
<h3>施工人员出勤状况</h3>
{{ cntspecial.cnt }}/
<span style="color: #f0ff00">{{ cntspecial.exceptioncount }}</span>
</a-col>
<a-col :span="4" class="block">
<h3>特种设备人员出勤状况</h3>
{{ cntemployee.cnt }}/
<span style="color: #f0ff00">{{ cntemployee.exceptioncount }}</span>
</a-col>
</a-row>
</a-row>
<a-row class="a-mt-20">
<h3 class="a-title">考勤记录查询</h3>
</a-row>
<!--查询条件-->
<a-form :form="form" layout="inline">
<a-form-item label="姓名">
<a-input class="a-input" v-model="queryparam.name" placeholder="请输入姓名" :disabled="loading" />
</a-form-item>
<a-form-item label="日期">
<y-date-picker :start.sync="queryparam.startdate1" :end.sync="queryparam.enddate1" :disabled="loading" />
</a-form-item>
<a-form-item>
<a-button :disabled="loading" class="a-ml-10 a-btn" icon="search" @click="searchdata">查询</a-button>
<a-button :disabled="loading" class="a-btn a-ml-10" icon="reload" @click="reset">刷新</a-button>
</a-form-item>
</a-form>
<!--查询结果-->
<a-row class="a-pt-20 a-pt-10">
<a-col :span="6">
<p class="a-title">查询结果</p>
</a-col>
<a-col :span="6" :offset="12" class="a-right">
<a-button :disabled="loading" class="a-ml-10 a-btn" icon="file-pdf" @click="exportdata">导出</a-button>
</a-col>
<a-table
class="ant-table"
:row-key="uuid"
:columns="columns"
:data-source="renyuankaoqin.data"
:loading="loading"
:pagination="{
position: 'bottom',
total: number(renyuankaoqin.total),
current: number(queryparam.pagenumber),
pagesize: number(queryparam.pagesize),
showsizechanger: true,
pagesizeoptions: ['7', '14', '21'],
showtotal: total => `总共有${total}条`
}"
:scroll="{x:1300, y: 'calc(100vh - 600px)' }"
:locale="{ emptytext: '暂未找到符合条件的结果' }"
@change="tablechange"
>
<!--操作-->
<template slot="action" slot-scope="text, record">
<a href="javascript:;" rel="external nofollow" @click="intodetail(record)">详情</a>
</template>
<span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
//处理超长生成...,并加上提示文字代码
<div :style="{maxwidth: '180px',whitespace: 'nowrap',textoverflow: 'ellipsis',overflow: 'hidden', wordwrap: 'break-word', wordbreak: 'break-all' }" slot="groupname" slot-scope="text, record">
<a-tooltip placement="left">
<template slot="title">
<span>{{record.groupname}}</span>
</template>
{{record.groupname}}
</a-tooltip>
</div>
</a-table>
</a-row>
</a-row>
</template>
<script>
import { ydatepicker } from '@/components/form'
import { mapgetters, mapactions } from 'vuex'
import { clone, get, now } from 'lodash'
export default {
name: 'renyuan-kaoqin',
components: { ydatepicker },
metainfo: {
title: '考勤记录'
},
data() {
return {
loading: false,
form: this.$form.createform(this),
initqueryparam: {},
queryparam: {
pagenumber: 1,
pagesize: 7,
name: '',
startdate1: '',
enddate1: ''
},
columns: [
{ title: '序号', align: 'center', width: 80, scopedslots: { customrender: 'serial' } },
{ title: '姓名', align: 'center', width: 150, dataindex: 'membername' },
{ title: '签到时间', align: 'center', width: 250, dataindex: 'intimenew' },
{ title: '签退时间', align: 'center', width: 250, dataindex: 'outtimenew' },
{ title: '出勤时间', align: 'center', width: 150, dataindex: 'jghour' },
{ title: '所属劳动组织', align: 'center', width: 200, scopedslots: { customrender: 'groupname' } },//这里groupname指向 div中slot="groupname"
{ title: '专业分工', align: 'center', width: 150, dataindex: 'worktypenew' },
{ title: '人员类别', align: 'center', dataindex: 'personneltypestr' }
]
}
},
computed: {
...mapgetters(['renyuankaoqin']),
cntall() {
return { cnt: get(this.renyuankaoqin, 'count.cntall[0].cnt'), exceptioncount: get(this.renyuankaoqin, 'count.cntall[0].exceptioncount') }
},
cntspecial() {
return {
cnt: get(this.renyuankaoqin, 'count.cntspecial[0].cnt'),
exceptioncount: get(this.renyuankaoqin, 'count.cntspecial[0].exceptioncount')
}
},
cntleader() {
return { cnt: get(this.renyuankaoqin, 'count.cntleader[0].cnt'), exceptioncount: get(this.renyuankaoqin, 'count.cntleader[0].exceptioncount') }
},
cntemployee() {
return {
cnt: get(this.renyuankaoqin, 'count.cntemployee[0].cnt'),
exceptioncount: get(this.renyuankaoqin, 'count.cntemployee[0].exceptioncount')
}
}
},
beforerouteupdate(to, from, next) {
next()
this.getdata()
},
beforerouteenter(to, from, next) {
next(async vm => {
vm.initqueryparam = clone(vm.queryparam) // 初始表单
vm.getrenyuankaoqincount({ xmbh: vm.$store.state.route.params.xmbh })
vm.getdata()
})
},
methods: {
...mapactions(['getrenyuankaoqin', 'getrenyuankaoqincount']),
uuid() {
return now() + math.random()
},
/** 清空查询条件 */
reset() {
this.queryparam = clone(this.initqueryparam)
this.form.resetfields()
this.getdata()
},
/** 获取表格数据 */
async getdata() {
this.loading = true
await this.getrenyuankaoqin({
xmbh: this.$store.state.route.params.xmbh,
...this.queryparam
})
this.loading = false
},
/** 表格数据变化 */
tablechange(pagination) {
this.queryparam.pagesize = pagination.pagesize
this.queryparam.pagenumber = pagination.current
this.getdata()
},
searchdata() {
this.queryparam.pagenumber = 1
this.getdata()
}
}
}
</script>
<style lang="stylus" scoped>
.block {
height: 86px;
padding: 10px 0;
box-sizing: border-box;
background: url('../../../assets/home/bg.png') no-repeat;
background-size: 100% 100%;
text-align: center;
font-size: 20px;
h3 {
text-align: center;
font-size: 18px;
}
span {
font-size: 20px;
}
}
</style>
补充知识：ant-design table 中的td 数据过多显示部分，鼠标放上去显示全部
第一：表格中的数据自动换行，所以表格中的行高不一致
目标实现：防止自动换行，
代码实现：//*** 是主要实现
:global {
.ant-table-tbody > tr > td,
.ant-table-thead > tr > th {
height: 62px;
white-space:nowrap;//***
overflow: auto;//***
}
.ant-table-thead > tr > th {
background: #2db7f5;
white-space:nowrap;//***
overflow: auto;//***
}
第二：上述目标实现，但是全部显示出来
目标实现：指定td的数据显示部分以及...,当鼠标放上去显示全部
代码实现：
const webcolumns = [
{
title: 'ip',
dataindex: 'srcip',
key: 'srcip',
width:'15%',
},{
title: '描述',
dataindex: 'msg',
key: 'msg',
//width:'8%',
oncell: ()=>{
return {
style:{
maxwidth:260,
overflow:'hidden',
whitespace:'nowrap',
textoverflow:'ellipsis',
cursor:'pointer',
}
}
},
render: (text) => <span placement="topleft" title={text}>{text}</span>,
}
]
其中 oncell（）以下为主要实现。
以上这篇ant design vue table中列超长显示...并加提示语的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
下一篇： 羊肉汤为什么不白