element
最近在APP上使用了element的表格，原因是vant上没table组件，所以在element的基础上简单的封装了一个组件
组件 tableElem.vue
<template >
<el-table
id="immunityTadle"
size="mini"
:data="tableData"
border
:max-height="clientHeight"
style="width: 100vw"
@row-click="handleClick"
>
<!-- fixed ==> 左边定位传true，右边定位传right; Type: String -->
<!-- //sortable ==> 传true 有排序按钮 Type: Number -->
<!-- align 对齐方式 left/center/right Type String -->
<!-- 对数量进项排序 -->
<!-- :sort-method="(a, b) => sortHandle(a, b,item.sortType)" -->
<el-table-column
v-for="(item, index) in propList"
:key="index"
:align="item.align ? item.align : 'left'"
:sortable="item.sortable ? true : false"
:fixed="
item.fixed == 'true' ? true : item.fixed == 'right' ? 'right' : false
"
:prop="item.prop"
:width="item.width"
:label="item.label"
></el-table-column>
<!-- :width="item.width" -->
<el-table-column label="操作" width="80" v-if="isShow">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<!-- <el-button type="text" size="small">编辑</el-button> -->
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
//propList 列的信息
//tableData 表格的信息
//isShow 是否显示编辑
//clientHeight 高度 固定列得话必传 否则出现问题
// /align 默认左 type strinng center right left
/*
<table-elem
:clientHeight="clientHeight"
:isShow="isShow"
:propList="propList"
:tableData="tableData"
@clickRow="clickRow"
></table-elem>
//使用计算属性计算
//50：单元格的高 40：thead的高 242： 当前页面表格上方的高（变量）
computed: {
clientHeight() {
return this.tableData.length * 50 + 40 + 242 > window.screen.height
? window.screen.height - 242
: this.tableData.length * 50 + 40
}
}
使用分页加载的方式 属性：clientHeight 方法 getPullPageBottom 必传
getPullPageBottom 父级对的方法
*/
props: ['propList', 'tableData', 'isShow', 'clientHeight'],
data() {
return {
}
},
methods: {
//对数量进行排序
// sortHandle(a, b, sortType) {
// if (!sortType) return
// return a[sortType] - b[sortType]
// },
//点击当前行信息 传给父组件
handleClick(row) {
this.$emit('clickRow', row)
},
pullScrollFun() {
if (!this.$listeners['getPullPageBottom']) return
let tableTbodyDom = document
.getElementById('immunityTadle')
.getElementsByClassName('el-table__body-wrapper')[0]
let that = this
let timer = true
tableTbodyDom.addEventListener('scroll', function() {
if (
tableTbodyDom.scrollHeight -
tableTbodyDom.scrollTop -
this.clientHeight <=
2
) {
if (timer == true) {
that.$emit('getPullPageBottom')
timer = false
setTimeout(() => {
timer = true
}, 1500)
}
}
})
}
},
mounted() {
this.pullScrollFun()
}
}
</script>
<style lang="less">
#immunityTadle::-webkit-scrollbar {
width: 0 !important;
}
#immunityTadle {
z-index: 0;
height: 100%;
overflow: auto !important;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
thead tr {
}
thead tr th {
padding: 0;
font-size: 12px;
color: #4b4f4d;
border: none;
border-bottom: 1px solid #e9e9e9;
.cell {
text-align: center;
word-break: normal;
height: 40px;
line-height: 40px;
}
}
tbody tr td {
padding: 0;
font-size: 12px;
color: #222;
border: none;
.cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 50px;
line-height: 50px;
}
}
}
.el-table {
overflow-y: scroll;
}
.el-table::before {
height: 0px !important;
}
</style>
<style lang="less" scoped>
// /deep/ thead tr {
// padding: 2px 0 !important;
// text-align: center;
// }
// /deep/ .el-table tr td {
// padding: 2px !important;
// }
// /deep/.el-table thead tr th {
// height: 40px !important;
// min-width: 50px !important;
// // padding: 2px 0 !important;
// font-size: 14px;
// text-align: center;
// }
// /deep/ tbody tr {
// padding: 1px !important;
// text-align: center;
// td {
// padding: 1px !important;
// text-align: center;
// .cell {
// // height: 30px !important;
// padding: 1px !important;
// font-size: 14px;
// }
// }
// }
</style>
引入组件
import TableElem from '@C/immunityCom/tableElem'
注册
components: {
TableElem
},
使用：
<table-elem
:clientHeight="clientHeight"
:isShow="isShow"
:propList="propList"
:tableData="tableData"
@clickRow="clickRow"
@getPullPageBottom="getPullPageBottom"
></table-elem>
propList: [
{
prop: 'animalType',
label: '种类',
width: '80',
fixed: 'true',
align: 'center',
},
{
prop: 'immuneDate', label: '时间', width: '100', sortable: true },
{
prop: 'vaccineType', label: '种类', width: '130' },
{
prop: 'annimateOughtCount',
label: '数量A',
width: '100',
// sortable: true,
align: 'center',
// sortType:"oughtCount"
},
{
prop: 'annimateCount',
label: '数量B',
width: '100',
// sortable: true,
align: 'center',
// sortType:"count"
},
],
tableData:[] //具体数据 字段名要和propList 的prop一致
