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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
JavaScript数组常用方法
Mar 02 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 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
第九节--绑定
2006/11/16 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
在Python程序中实现分布式进程的教程
2015/04/28 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
详解KMP算法以及python如何实现
2020/09/18 Python
python中time.ctime()实例用法
2021/02/03 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
小学安全工作汇报材料
2014/08/19 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL