表格封装

<template>
<div v-if="showTable" :style="cssVars">
<a-table
ref="aTable"
:columns="rowColumns"
:customRow="onClickRow"
:data-source="tableData"
:loading="tableLoading"
:pagination="false"
:row-selection="isSelection ? rowSelection : null"
:rowClassName="rowClassName"
:rowKey="myRowKey"
:scroll="{ x: 500 }"
:bordered="isBorder"
>
<!-- :scroll="{ x: true }"-->
<!-- @click.stop :scroll="{ x: 500, y: 600 }"-->
<template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="text, record, index">
<slot :name="slot" v-bind="{text, record, index}"></slot>
</template>
</a-table>
</div>
</template>

<script>
export default {
name: "commonTable",
props: {
/*
* 表头数据信息
* 例:
* title: "校区名称",
* dataIndex: "campusName",
* key: "campusName",
* */
columns: {
type: Array,
default: function () {
return []
},
},
// 是否显示表格复选框
isSelection: {
type: Boolean,
default: false
},
//是否显示表格单选框
isRadio: {
type: Boolean,
default: false
},
// 表格数据内容
tableData: {
type: Array,
default: function () {
return []
},
},
//是否开启表格加载动画
tableLoading: {
type: Boolean,
default: false
},
//暂无数据的上下撑开的外边距
noDataMg: {
type: Number,
default: 140
},
//表格最小高度
tableMinHeight: {
type: [Number, String],
default: '558px'
},
//表格是否开启内容不换行切溢出悬浮显示
ellipsis: {
type: Boolean,
default: true
},
isChangeRowColor: {
type: Number,
default: 0
},
//是否斑马纹
zebraStripe: {
type: [Number, Boolean, String],
default: 0
},
myRowKey: {
type: String,
default: 'id'
},
isBorder:{
type:Boolean,
default:false
},
defaultKeys:{
type:Array,
default(){
return []
}
}
},
computed: {
cssVars() {
return {
"--tableMinHeight": this.tableMinHeight,
"--noDataMg": `${this.noDataMg}px`,
}
},
rowSelection() {
return {
selectedRowKeys: this.selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
this.selectedRowKeys = selectedRowKeys;
this.selectedRows = selectedRows
// console.log('触发table change事件',selectedRowKeys, selectedRows)
this.$emit('getCheckedData', selectedRows)
},
type: this.isRadio ? 'radio' : 'checkbox',
onSelect: (record, selected, selectedRows) => {
// console.log('onSelect',record, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
getCheckboxProps: record => ({//重点部分
props: {
defaultChecked: this.selectedRowKeys.indexOf(record[this.myRowKey]) > -1 ? true : false,//defaultCheckedId里面是默认选中的id,判断是否含有这些id,有的那就选中,没有的就不选中
id: record[this.myRowKey] + ''//使得id的数据类型为string
}
})
};
},
},
data() {
return {
rowColumns: [],
showTable: false,
selectedRowKeys: ['2'],
selectedRows:[]
}
},
watch: {
columns: {
handler(arr) {
this.rowColumns = this.columns.map(item => {
return {...item, ellipsis: this.ellipsis}
})
this.showTable = true;
},
deep: true,
immediate: true
},
tableData: {
handler(arr) {
// console.log(arr)
},
deep: true,
immediate: true
},
defaultKeys:{
immediate:true,
deep:true,
handler(val){
this.selectedRowKeys=val
}
}
},


methods: {
binding() {

},
changeSelect(rows, keys) {

},
onClickRow(record) {
return {
on: {
click: () => {
let index = this.selectedRowKeys.indexOf(record[this.myRowKey]);
if(this.isRadio){
index == -1 ? this.selectedRowKeys = [record[this.myRowKey]] : []
index == -1 ? this.selectedRows = [record] : []

}else {
index == -1 ? this.selectedRowKeys.push(record[this.myRowKey]) : this.selectedRowKeys.splice(index,1);
index == -1 ? this.selectedRows.push(record) : this.selectedRows.splice(index,1);

}
this.$emit('getCheckedData', this.selectedRows)
}
}
}
},
//修改表格奇数偶数行样式
rowClassName(record, index) {
if (this.zebraStripe) {
if (index % 2 === 0) {

return 'table-back-odd-default'
} else {

return 'table-back-even-default'
}
}

},
}
}
</script>

<style lang="less" scoped>
::v-deep {

.ant-table-tbody > tr > td {
padding: 0 16px !important;
height: 48px;
line-height: 24px;
}


.ant-table {
min-height: var(--tableMinHeight) !important;
}

.ant-empty-normal {
margin: var(--noDataMg) 0 !important;
}

}
</style>
===========================================
<commonTable myRowKey="roomId" ref="classTable" :columns="columns" :isRadio="true" :isSelection="true"
:tableData="tableData" tableMinHeight="500px" @getCheckedData="getCheckedRoom"
>
===============================================
columns: [
{
title: "序号",
scopedSlots: {customRender: "index"},
},
{
title: "教室",
dataIndex: "name",
key: "name",
},
{
title: "楼栋",
dataIndex: "buildingName",
key: "buildingName",
width: 100,
},
],
posted @ 2023-01-10 10:29  士广  阅读(71)  评论(0)    收藏  举报