140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
<!--
|
|
* @Date: 2020-12-14 09:07:03
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2022-06-21 14:22:47
|
|
* @FilePath: \basic-admin\src\components\BaseTable\index.vue
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="base-table-container">
|
|
<div class="setting">
|
|
<el-popover
|
|
placement="bottom-start"
|
|
width="200"
|
|
trigger="click"
|
|
>
|
|
<div class="setting-box">
|
|
<el-checkbox
|
|
v-for="(item, index) in tableConfig"
|
|
:key="'cb' + index"
|
|
v-model="selectedBox[index]"
|
|
:label="item.label"
|
|
/>
|
|
</div>
|
|
<i slot="reference" class="el-icon-s-tools" />
|
|
</el-popover>
|
|
</div>
|
|
<el-table v-loading="isLoading" :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}" :data="renderData" :stripe="true" fit highlight-current-row style="width: 100%">
|
|
<el-table-column v-if="page && limit" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" width="70" align="center" />
|
|
<el-table-column
|
|
v-for="item in renderTableHeadList"
|
|
:key="item.prop"
|
|
v-bind="item"
|
|
>
|
|
<template slot-scope="scope">
|
|
|
|
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
|
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
<slot name="content" />
|
|
<slot name="handleBtn" />
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { isObject, isString } from 'lodash'
|
|
export default {
|
|
name: 'BaseTable',
|
|
filters: {
|
|
commonFilter: (source, filterType = a => a) => {
|
|
return filterType(source)
|
|
}
|
|
},
|
|
props: {
|
|
tableData: {
|
|
type: Array,
|
|
required: true,
|
|
validator: val => val.filter(item => !isObject(item)).length === 0
|
|
},
|
|
tableConfig: {
|
|
type: Array,
|
|
required: true,
|
|
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
|
},
|
|
isLoading: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
page: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tableConfigBak: [],
|
|
selectedBox: new Array(20).fill(true)
|
|
}
|
|
},
|
|
computed: {
|
|
renderData() {
|
|
return this.tableData.map((item, index) => {
|
|
return {
|
|
...item,
|
|
_pageIndex: (this.page - 1) * this.limit + index + 1
|
|
}
|
|
})
|
|
},
|
|
renderTableHeadList() {
|
|
return this.tableConfig.filter((item, index) => {
|
|
return this.selectedBox[index]
|
|
})
|
|
}
|
|
},
|
|
beforeMount() {
|
|
this.selectedBox = new Array(20).fill(true)
|
|
},
|
|
// mounted() {
|
|
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
|
|
// return {
|
|
// ...item,
|
|
// selected: true
|
|
// }
|
|
// })
|
|
// },
|
|
methods: {
|
|
emitData(val) {
|
|
this.$emit('emitFun', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
@import "~@/styles/index.scss";
|
|
.base-table-container {
|
|
.el-table {
|
|
border-top: 1px solid #dfe6ec;
|
|
}
|
|
}
|
|
.setting {
|
|
text-align: right;
|
|
padding: 15px;
|
|
.setting-box {
|
|
width: 100px;
|
|
}
|
|
i {
|
|
color: #aaa;
|
|
@extend .pointer;
|
|
}
|
|
}
|
|
|
|
</style>
|