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中列超長顯示...并加提示語的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
網公網安備