Ant Design Vue table中列超长显示...并加提示语的实例
程序员文章站
2022-03-21 12:53:11
我就废话不多说了,大家还是直接看代码吧~
我就废话不多说了,大家还是直接看代码吧~
<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中列超长显示...并加提示语的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: Mysql5.7定时备份的实现