Ant Design Vue table中列超長顯示...并加提示語的實例

更新時間：2020年10月31日 15:08:06 作者：刪除記憶刪除誰

這篇文章主要介紹了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 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: '專業(yè)分工', 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()
 },
 /** 獲取表格數(shù)據(jù) */
 async getData() {
 this.loading = true
 await this.getRenYuanKaoQin({
 xmbh: this.$store.state.route.params.xmbh,
 ...this.queryParam
 })
 this.loading = false
 },
 /** 表格數(shù)據(jù)變化 */
 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 數(shù)據(jù)過多顯示部分，鼠標放上去顯示全部

第一：表格中的數(shù)據(jù)自動換行，所以表格中的行高不一致

目標實現(xiàn)：防止自動換行，

代碼實現(xiàn)：//*** 是主要實現(xiàn)

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

第二：上述目標實現(xiàn)，但是全部顯示出來

目標實現(xiàn)：指定td的數(shù)據(jù)顯示部分以及...,當鼠標放上去顯示全部

代碼實現(xiàn)：

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（）以下為主要實現(xiàn)。

以上這篇Ant Design Vue table中列超長顯示...并加提示語的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue2.0 如何在hash模式下實現(xiàn)微信分享
這篇文章主要介紹了vue2.0 如何在hash模式下實現(xiàn)微信分享,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
antd?Vue實現(xiàn)Login登錄頁面布局案例詳解?附帶驗證碼驗證功能
這篇文章主要介紹了antd?Vue實現(xiàn)Login登錄頁面布局案例詳解附帶驗證碼驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-05-05
element-ui如何在table中使用tooltip
這篇文章主要介紹了element-ui如何在table中使用tooltip問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue實現(xiàn)進入全屏和退出全屏的示例代碼
最近一個項目需要進行大屏展示,所以登錄完就要處于一個全屏的狀態(tài),本文主要介紹了vue實現(xiàn)進入全屏和退出全屏的示例代碼,具有一定的參考價值,感興趣的可以了解一下
2023-12-12
Vue中訪問指定鏈接并解析頁面內(nèi)容的完整指南
在現(xiàn)代Web開發(fā)中,經(jīng)常需要從其他網(wǎng)頁獲取并解析內(nèi)容,本文將詳細介紹如何在Vue項目中實現(xiàn)這一功能,感興趣的小伙伴可以跟隨小編一起學習一下
2025-03-03
vue使用Echart線柱混合圖排坑記錄
這篇文章主要為大家介紹了vue使用Echart線柱混合圖排坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10
vue學習筆記之給組件綁定原生事件操作示例
這篇文章主要介紹了vue學習筆記之給組件綁定原生事件操作,結合實例形式詳細分析了vue.js組件綁定原生事件相關原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2020-02-02
VUE實現(xiàn)自身整體組件銷毀的示例代碼
這篇文章主要介紹了VUE實現(xiàn)自身整體組件銷毀的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
Vee-validate 父組件獲取子組件表單校驗結果的實例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內(nèi)容并顯示對應的錯誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗結果 ,需要的朋友可以參考下
2019-05-05