Ant Design Vue table with a long column display...and an example of a prompt

<template>
 <a-row class="a-left">
 <a-row>
 <p class="a-title">Today's attendance status</p>
 <a-row type="flex" justify="space-around">
 <a-col :span="4" class="block">
  <h3>Overview of attendance status</h3>
  {{  }}/
  <span style="color: #F0FF00">{{  }}</span>
 </a-col>
 <a-col :span="4" class="block">
  <h3>Manager attendance status</h3>
  {{  }}/
  <span style="color: #F0FF00">{{  }}</span>
 </a-col>
 <a-col :span="4" class="block">
  <h3>Construction personnel attendance status</h3>
  {{  }}/
  <span style="color: #F0FF00">{{  }}</span>
 </a-col>
 <a-col :span="4" class="block">
  <h3>Special equipment personnel attendance status</h3>
  {{  }}/
  <span style="color: #F0FF00">{{  }}</span>
 </a-col>
 </a-row>
 </a-row>
 <a-row class="a-mt-20">
 <h3 class="a-title">Attendance record query</h3>
 </a-row>
 <!--Query criteria-->
 <a-form :form="form" layout="inline">
 <a-form-item label="Name">
 <a-input class="a-input" v-model="" placeholder="Please enter your name" :disabled="loading" />
 </a-form-item>
 <a-form-item label="date">
 <y-date-picker :="queryParam.startDate1" :="queryParam.endDate1" :disabled="loading" />
 </a-form-item>
 <a-form-item>
 <a-button :disabled="loading" class="a-ml-10 a-btn" icon="search" @click="searchData">Query</a-button>
 <a-button :disabled="loading" class="a-btn a-ml-10" icon="reload" @click="reset">refresh</a-button>
 </a-form-item>
 </a-form>
 <!--Query结果-->
 <a-row class="a-pt-20 a-pt-10">
 <a-col :span="6">
 <p class="a-title">Query结果</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">Export</a-button>
 </a-col>
 <a-table
 class="ant-table"
 :row-key="uuid"
 :columns="columns"
 :data-source=""
 :loading="loading"
 :pagination="{
  position: 'bottom',
  total: Number(),
  current: Number(),
  pageSize: Number(),
  showSizeChanger: true,
  pageSizeOptions: ['7', '14', '21'],
  showTotal: total => `There are a total of${total}strip`
 }"
 :scroll="{x:1300, y: 'calc(100vh - 600px)' }"
 :locale="{ emptyText: 'No results that meet the criteria were found' }"
 @change="tableChange"
 >
 <!--operate-->
 <template slot="action" slot-scope="text, record">
  <a href="javascript:;" rel="external nofollow" @click="intoDetail(record)">Details</a>
 </template>
 <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
 //Processing for super long generation... and adding prompt text code <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>{{}}</span>
  </template>
  {{}}
  </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: 'Attendance Record'
 },
 data() {
 return {
 loading: false,
 form: this.$(this),
 initQueryParam: {},
 queryParam: {
 pageNumber: 1,
 pageSize: 7,
 name: '',
 startDate1: '',
 endDate1: ''
 },
 columns: [
 { title: 'Serial number', align: 'center', width: 80, scopedSlots: { customRender: 'serial' } },
 { title: 'Name', align: 'center', width: 150, dataIndex: 'memberName' },
 { title: 'Sign-in time', align: 'center', width: 250, dataIndex: 'inTimeNew' },
 { title: 'Sign-refund time', align: 'center', width: 250, dataIndex: 'outTimeNew' },
 { title: 'Attendance time', align: 'center', width: 150, dataIndex: 'jgHour' },
 { title: 'The labor organization to which it belongs', align: 'center', width: 200, scopedSlots: { customRender: 'groupName' } },//Here groupName points to slot="groupName" in div { title: 'Professional division of labor', align: 'center', width: 150, dataIndex: 'workTypeNew' },
 { title: 'Personnel Category', align: 'center', dataIndex: 'personnelTypeStr' }
 ]
 }
 },
 computed: {
 ...mapGetters(['RenYuanKaoQin']),
 cntAll() {
 return { cnt: get(, '[0].cnt'), exceptionCount: get(, '[0].exceptionCount') }
 },
 cntSpecial() {
 return {
 cnt: get(, '[0].cnt'),
 exceptionCount: get(, '[0].exceptionCount')
 }
 },
 cntLeader() {
 return { cnt: get(, '[0].cnt'), exceptionCount: get(, '[0].exceptionCount') }
 },
 cntEmployee() {
 return {
 cnt: get(, '[0].cnt'),
 exceptionCount: get(, '[0].exceptionCount')
 }
 }
 },
 beforeRouteUpdate(to, from, next) {
 next()
 ()
 },
 beforeRouteEnter(to, from, next) {
 next(async vm => {
  = clone() // Initial form ({ xmbh: vm.$ })
 ()
 })
 },
 methods: {
 ...mapActions(['getRenYuanKaoQin', 'getRenYuanKaoQinCount']),
 uuid() {
 return now() + ()
 },
 /** Clear query conditions */
 reset() {
  = clone()
 ()
 ()
 },
 /** Get table data */
 async getData() {
  = true
 await ({
 xmbh: this.$,
 ...
 })
  = false
 },
 /** Table data changes */
 tableChange(pagination) {
  = 
  = 
 ()
 },
 searchData() {
  = 1
 ()
 }
 }
}
</script>

<style lang="stylus" scoped>
.block {
 height: 86px;
 padding: 10px 0;
 box-sizing: border-box;
 background: url('../../../assets/home/') no-repeat;
 background-size: 100% 100%;
 text-align: center;
 font-size: 20px;

 h3 {
 text-align: center;
 font-size: 18px;
 }

 span {
 font-size: 20px;
 }
}
</style>

: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;//***
 }

const webColumns = [
 {
 title: 'IP',
 dataIndex: 'srcIp',
 key: 'srcIp',
 width:'15%',
 },{
 title: 'describe',
 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>,
 }
 ]