Ant Design Vue table中列超長顯示...並加提示語的例項
阿新 • • 發佈:2020-11-02
我就廢話不多說了,大家還是直接看程式碼吧~
<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: '姓名',width: 150,dataIndex: 'memberName' },{ title: '簽到時間',width: 250,dataIndex: 'inTimeNew' },{ title: '簽退時間',dataIndex: 'outTimeNew' },{ title: '出勤時間',dataIndex: 'jgHour' },{ title: '所屬勞動組織',width: 200,scopedSlots: { customRender: 'groupName' } },//這裡groupName指向 div中slot="groupName" { title: '專業分工',dataIndex: 'workTypeNew' },{ title: '人員類別',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'),'count.cntSpecial[0].exceptionCount') } },cntLeader() { return { cnt: get(this.RenYuanKaoQin,'count.cntLeader[0].cnt'),'count.cntLeader[0].exceptionCount') } },cntEmployee() { return { cnt: get(this.RenYuanKaoQin,'count.cntEmployee[0].cnt'),'count.cntEmployee[0].exceptionCount') } } },beforeRouteUpdate(to,from,next) { next() this.getData() },beforeRouteEnter(to,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中列超長顯示...並加提示語的例項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。