Ant Design Vue table中列超长显示...并加提示语的实例


Posted in Javascript onOctober 31, 2020

我就废话不多说了,大家还是直接看代码吧~

<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中列超长显示...并加提示语的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
js实现简单扫雷
Nov 27 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
vue中可编辑树状表格的实现代码
Oct 31 #Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 #Javascript
react ant Design手动设置表单的值操作
Oct 31 #Javascript
解决pycharm双击但是无法打开的情况
Oct 31 #Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 #Javascript
antd design table更改某行数据的样式操作
Oct 31 #Javascript
antd配置config-overrides.js文件的操作
Oct 31 #Javascript
You might like
php实现等比例压缩图片
2018/07/26 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
Python常用模块用法分析
2014/09/08 Python
python实现从字典中删除元素的方法
2015/05/04 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
好书伴我成长演讲稿
2014/05/14 职场文书
民事起诉状范文
2015/05/19 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android