(编辑:jimmy 日期: 2024/12/23 浏览:2)
我就废话不多说了,大家还是直接看代码吧~
<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: '专业分工', 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中列超长显示...并加提示语的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。