Ant Design Vue table Column Extremely Long Display... with Prompt Example
- 2021-09-12 00:03:52
- OfStack
I won't talk too much, let's just look at the code ~
<template>
<a-row class="a-left">
<a-row>
<p class="a-title"> Attendance status today </p>
<a-row type="flex" justify="space-around">
<a-col :span="4" class="block">
<h3> Overview of Attendance Status </h3>
{{ cntAll.cnt }}/
<span style="color: #F0FF00">{{ cntAll.exceptionCount }}</span>
</a-col>
<a-col :span="4" class="block">
<h3> Attendance status of management personnel </h3>
{{ cntLeader.cnt }}/
<span style="color: #F0FF00">{{ cntLeader.exceptionCount }}</span>
</a-col>
<a-col :span="4" class="block">
<h3> Attendance status of construction personnel </h3>
{{ cntSpecial.cnt }}/
<span style="color: #F0FF00">{{ cntSpecial.exceptionCount }}</span>
</a-col>
<a-col :span="4" class="block">
<h3> Attendance status of special equipment personnel </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"> Attendance record inquiry </h3>
</a-row>
<!-- Query criteria -->
<a-form :form="form" layout="inline">
<a-form-item label=" Name ">
<a-input class="a-input" v-model="queryParam.name" placeholder=" Please enter a name " :disabled="loading" />
</a-form-item>
<a-form-item label=" Date ">
<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"> 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 results -->
<a-row class="a-pt-20 a-pt-10">
<a-col :span="6">
<p class="a-title"> Query results </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="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 => ` In total ${total} Article `
}"
:scroll="{x:1300, y: 'calc(100vh - 600px)' }"
:locale="{ emptyText: ' No qualified results have been found yet ' }"
@change="tableChange"
>
<!-- Operation -->
<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>
// Handling super-long builds ..., And add a 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>{{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: ' Attendance record '
},
data() {
return {
loading: false,
form: this.$form.createForm(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: ' Check-in time ', align: 'center', width: 250, dataIndex: 'inTimeNew' },
{ title: ' Time of signing and returning ', align: 'center', width: 250, dataIndex: 'outTimeNew' },
{ title: ' Attendance time ', align: 'center', width: 150, dataIndex: 'jgHour' },
{ title: ' Labor Organization to which it belongs ', align: 'center', width: 200, scopedSlots: { customRender: 'groupName' } },// Here groupName Point div Medium slot="groupName"
{ title: ' Specialized division of labor ', align: 'center', width: 150, dataIndex: 'workTypeNew' },
{ title: ' Category of personnel ', 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) // Initial form
vm.getRenYuanKaoQinCount({ xmbh: vm.$store.state.route.params.xmbh })
vm.getData()
})
},
methods: {
...mapActions(['getRenYuanKaoQin', 'getRenYuanKaoQinCount']),
uuid() {
return now() + Math.random()
},
/** Empty query criteria */
reset() {
this.queryParam = clone(this.initQueryParam)
this.form.resetFields()
this.getData()
},
/** Get tabular data */
async getData() {
this.loading = true
await this.getRenYuanKaoQin({
xmbh: this.$store.state.route.params.xmbh,
...this.queryParam
})
this.loading = false
},
/** Table data change */
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>
Additional knowledge: ant-design table td data excessive display part, the mouse put up to show all
1: The data in the table wrap automatically, so the row height in the table is less than 1
Goal achievement: Prevent word wrapping,
Code implementation://*** is the main implementation
: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;//***
}
2: The above goals are achieved, but all of them are shown
Goal realization: Specify the data display part of td and..., and display all when the mouse is put on it
Code implementation:
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>,
}
]
Among them, oncell () is the main implementation.