封装缘由：
1.减少重复⼯作量
2.统⼀风格
3.⽅便⼀键式更改（如果样式变更，减少⼯作量）
封装⽅式：
本次封装没有封装接⼝联调部分，只是基于⽇常使⽤的规范，进⾏常⽤功能的封装。
封装后⽀持的功能或⽅便之处：
1.新增了斑马线的功能。
2.新增了省略时⿏标移⼊的ToolTip组件提⽰。
3.通过配置可以选择隐藏某些列。
4.数据为空时，官⽹的滚动条在表头下⾯，改为表的最下⾯。
封装时遇到的问题及解决⽅式
1.问题：插槽的⼆次封装，如果想要正常使⽤，必须在封装组件的时候重新定义⼀遍。 解决⽅式：封装时通过遍历传⼊的column，去动态⽣成外层的插槽。
2.问题：封装省略时⿏标移⼊的ToolTip组件提⽰时，判断是否省略。
解决⽅式：给容器⼀个最⼤宽度，然后判断容器的scrollWidth是否⼤于设置好的最⼤宽度。
3.问题：如果需要判断是否溢出的是⼀个插槽，该怎么去判断。
解决⽅式：通过columns⾃定义⼀个变量代表渲染⽅式，判断是插槽类型还是⽂字类型。如果是插槽类型，那么就外包裹；如果是⽂件类型，那么就内包裹。具体请详看代码。
4.问题：初版斑马线使⽤计算设置的，但是使⽤fixed时，出现错位情况。
解决⽅式：使⽤css⽅式添加斑马线。
5.问题：scroll绑定的时，如果没有赋值会报错。
解决⽅式：动态判断是否有没有传⼊scroll属性，如果没有传⼊，不会绑定此属性。
6.问题：因为antd-vue层级结构已定，该如果更改滚动条位置。
解决⽅式：隐藏之前的dom，通过定位和更改样式，去实现⼀个类似的效果。
完整代码
<template>
<div :class="`my-table ${dataSource.length ? '' : 'no-data'}`">
<a-table
:class="hideStripe ? '' : 'stripe'"
:rowKey="rowKey || 'id'"
:columns="newColumns"
:
data-source="dataSource"
:loading="loading"
:pagination="newPagination"
:showHeader="showHeader"
:row-selection="rowSelection"
:childrenColumnName="childrenColumnName"
:expandIcon="null"
v-on="$listeners"
v-bind="
$props.scroll
{
scroll: {
...scroll,
x:
scroll.x <= 1500
dataSource.length
scroll.x
: null
: scroll.x,
},
}
: {}
"
@expand="expand"
:rowClassName="rowClassName"
>
<template slot="customTitle">
<slot name="customTitle"></slot>
</template>
<template
v-for="(column, columnIndex) in columns"
:slot="column.scopedSlots ? column.scopedSlots.customRender : ''"
slot-scope="text, record, index"
>
<div :key="columnIndex">
<!-- ⽀持传⼊插槽的tooltip格式 -->
<EllipsisContent
v-if="
column.scopedSlots
column.scopedSlots.ellipsisSlot
true
: false
: false
"
:
width="getEllipsisContentWidth(column)"
:title="
record[column.scopedSlots ? column.scopedSlots.customRender : ''] "
>
<slot
:name="column.scopedSlots ? column.scopedSlots.customRender : ''" v-bind="record"
v-bind:index="index"
>
</slot>
</EllipsisContent>
<!-- ⽀持传⼊插槽的普通渲染格式 -->
<!-- 不⽀持传⼊插槽的tooltip格式 -->
<!-- 通⽤xxxx判断（0：否，1：是） -->
<slot
v-else
:name="column.scopedSlots ? column.scopedSlots.customRender : ''" v-bind="record"
v-bind:index="index"
>
<!-- ⽀持传⼊插槽的普通渲染格式 -->
<div
v-if="
column.scopedSlots
column.scopedSlots.ellipsisName
true
: false
: false
jumper2"
:slot="column.scopedSlots.ellipsisName"
:key="index"
>
<EllipsisContent
:width="getEllipsisContentWidth(column)"
:title="record[column.scopedSlots.ellipsisName]"
>
{{ record[column.scopedSlots.ellipsisName] }}
</EllipsisContent>
</div>
<!-- 通⽤xxxx判断（0：否，1：是） -->
<div
v-if="
column.scopedSlots
column.scopedSlots.customRender === 'is'
true
: false
:
false
"
slot="is"
>
{{ record[column.dataIndex] == 1 ? "是" : record[column.dataIndex] == 0 ? "否" : "" }} </div>
</slot>
</div>
</template>
<template
:slot="expandedRowRender ? 'expandedRowRender' : 'undefind'"
slot-scope="record"
>
<slot name="expandedRowRender" v-bind="record"></slot>
</template>
</a-table>
<!-- 数据为空时显⽰⾃定义 empty -->
<a-empty v-show="!dataSource.length" class="empty">
<img slot="image" src="@/assets/svg/empty.svg" />
</a-empty>
</div>
</template>
<script>
const defaultPagination = {
pageSize: 10,
current: 1,
pageSizeOptions: ["10", "20", "30", "50", "100"],
"show-size-changer": true,
"show-quick-jumper": true,
showTotal(total) {
return `共${total}条`;
},
};
// antd 表格默认的左右padding，会影响省略时⽗容器的计算
const ANT_TABLE_LR_PADDING = 32;
import { Table } from "ant-design-vue";
export default {
name: "my-table",
data() {
return {
paginationData: defaultPagination,
variableColumns: [],
isload: true,
};
},
props: {
...Table.props,
expandedRowRender: {
type: Boolean,
default: false,
},
pagination: {
default() {
return defaultPagination;
},
},
/
/ 隐藏斑马线
hideStripe: {
type: Boolean,
default: false,
},
// 隐藏配置过hidden为true的列
hideConfigColumns: {
type: Boolean,
default: false,
},
},
methods: {
expand(expanded, record) {
this.$emit("expand", expanded, record);
},
// 获取省略容器真实宽度
getEllipsisContentWidth(column) {
let columnWidth = parseInt(column.width || 200 + ANT_TABLE_LR_PADDING); return columnWidth - ANT_TABLE_LR_PADDING;
},
},
computed: {
newPagination() {
if (!this.pagination) {
return false;
}
return {
...defaultPagination,
...this.pagination,
};
},
// 通过hideConfigColumns控制columns中配置过hidden为true的列隐藏
newColumns() {
let columns = lumns;
let newColumns = [];
if (this.hideConfigColumns) {
columns.map((column) => {
if (!column.hidden) {
newColumns.push(column);
}
});
}
return newColumns?.length ? newColumns : columns;
},
},
};
</script>
<style lang="less" scoped>
@import "@/style/antd.less";
.my-table {
position: relative;
// 斑马线css版样式
.stripe {
/deep/ .ant-table-tbody > tr:nth-child(even) > td {
background: #f5f7fa;
}
/
deep/ .ant-table-tbody > tr:nth-child(even) {
&:hover td {
background: #e6f7ff;
}
}
}
// 修改每列的样式
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
padding: 12px 16px;
}
/
deep/ tr.ant-table-expanded-row,
tr.ant-table-expanded-row:hover {
background-color: transparent;
}
// 删除拓展表格⽆⽤的样式
/deep/ tr.ant-table-expanded-row.ant-table-expanded-row-level-1 > td { padding: 0;
}
/deep/ tr.ant-table-expanded-row.ant-table-expanded-row-level-1 {
.ant-table-tbody > tr:last-child > td {
border-bottom: 0;
}
}
/deep/ .ant-table-scroll {
.ant-table-body {
overflow-x: auto !important;
}
}
}
.no-data {
/deep/ .ant-table-placeholder {
display: none;
}
/
deep/ .ant-table-body {
height: 168px;
}
}
.empty {
top: 46px;
width: 100%;
height: 100px;
position: absolute;
padding-right: 14px;
/deep/ .ant-empty-image {
height: 40px;
margin-top: 20px;
margin-bottom: 8px;
}
/deep/ .ant-empty-description {
color: rgba(0, 0, 0, 0.2);
}
}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议