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

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

<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 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' icon='search' @click='searchData'>查询</a-button> <a-button :disabled='loading' 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' icon='file-pdf' @click='exportData'>导出</a-button> </a-col> <a-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 : 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中列超长显示...并加提示语的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。