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的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
js切换光标示例代码
Oct 10 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
js 函数性能比较方法
Aug 24 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 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
信息专业本科生个人的自我评价
2013/10/28 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
顶岗实习计划书
2014/01/10 职场文书
校三好学生主要事迹
2014/01/11 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
小学生运动会广播
2015/08/19 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电