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 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
秦兵马俑教学反思
2014/02/07 职场文书
物控部经理职务说明书
2014/02/25 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
党支部综合考察材料
2014/05/19 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
文体活动总结
2015/02/04 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Python WSGI 规范简介
2021/04/11 Python
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js