VUE表格组件
文件名EnhancedTable 一下代码<template><divclass="enhanced-table"v-loading="listLoading"element-loading-spinner="el-icon-loading"><divstyle="text-align:right;margin-bottom:10px;padding-right:20
文件名 EnhancedTable 一下代码
<template>
<div class="enhanced-table" v-loading="listLoading" element-loading-spinner="el-icon-loading">
<div style="text-align: right; margin-bottom: 10px;padding-right: 20px;">
<el-button v-if="showFilter" type="primary" icon="el-icon-s-operation" circle size="small" @click="openFilter" :title="$t('common.show_hidden')"></el-button>
<el-button v-if="showRefresh" type="primary" size="mini" @click="refreshData" circle :title="$t('layout.refresh')">
<svg-icon icon-class="refresh" class-name="button-icon"></svg-icon>
</el-button>
<el-button v-if="isSearch" type="default" size="mini" @click="searchButton = !searchButton" circle :title="$t('common.search')">
<svg-icon icon-class="search" class-name="button-icon"></svg-icon>
</el-button>
</div>
<el-table :data="tableData"
:ref="refName"
@selection-change="handleSelectionChange"
:height="height"
:border="border"
:row-key="rowKey"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
size="medium" :cell-class-name="cellName"
@sort-change="sortChange"
:default-sort="defaultSort" >
<template v-for="(column, index) in columns">
<template v-if="column.hasOwnProperty('show') ? column.show : true">
<!--<el-table-column v-if=" column.type === 'index' " :key="index" :formatter="formatterIndex"
:label="$t('common.sequence_number')" :min-width="60"></el-table-column>-->
<template v-if=" column.type === 'index' ">
<ColumnItem :formatter="formatterIndex" :label="$t('common.sequence_number')" :width="column.width" :key="index"></ColumnItem>
</template>
<slot v-else-if="column.operation" :name="column.operation" :column="column"></slot>
<!--<component :key="index" v-else-if="column.component" :is="column.component" :col-config="column"></component>-->
<el-table-column v-else v-bind="column" :key="index"></el-table-column>
</template>
</template>
<div slot="empty">
<img src="../../assets/no_data.png" alt="" style="width: 70%;">
</div>
</el-table>
<div class="enhanced-table-page" v-show="total > 0">
<el-pagination
background
layout="prev,pager,next,jumper,->,sizes,total"
:total="total"
:page-size.sync="limit"
:current-page.sync="page"
:page-sizes="pageSizes"
@size-change="pageSizeChange"
@current-change="pageIndexChange">
</el-pagination>
</div>
<el-dialog :title="$t('common.show_hidden')" :visible.sync="showFilterDialog" width="500px">
<div style="">
<div class="mbn">
<el-checkbox :indeterminate="indeterminate" v-model="selectAll" @change="handleCheckAll">
{{ $t('common.select_all') }}
</el-checkbox>
</div>
<el-checkbox-group v-model="checkedColumns" style="margin-left: 16px;">
<el-checkbox style="display: block;margin-bottom: 5px;" v-for="(column, index) in columnList" :label="column.prop"
:key="index" :checked="column.show">
{{ column.label }}
</el-checkbox>
</el-checkbox-group>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="showFilterDialog = false">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="submitChangeColumn">{{ $t('common.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import ColumnItem from "@/components/PackagingTable/ColumnItem";
export default {
name: "EnhancedTable",
components: {
ColumnItem
},
props: {
height: {
type: String,
//default: '100%'
},
border: {
type: Boolean, default: false
},
rowKey: {
type: String, default: ''
},
listLoading: {
type: Boolean, default: false
},
refName: {
type: String, default: 'tabledata'
},
tableData: {
type: Array,
default() {
return []
}
},
columns: {
type: Array, default: []
},
total: {
type: Number, default: 0
},
pageindex: {
type: Number, default: 1
},
pagesize: {
type: Number, default: 20
},
pageSizes: {
type: Array,
default() {
return [5, 10, 15, 20, 30, 50]
}
},
cellName: {
type: Function
},
sortChange: {
type: Function,
default() {
return null
}
},
isSearch: {
type: Boolean,
default: false
},
showSearch: {
type: Boolean
},
showFilter: {
type: Boolean,
default: true
},
defaultSort: {
type: Object,
default() {
return {}
}
}
},
watch: {
total(val) {
this.$refs[this.refName].doLayout();
},
checkedColumns(list) {
let length = list.length
if (length === 0) {
this.indeterminate = false
} else {
this.indeterminate = length !== this.columnsLength;
}
}
},
computed: {
page: {
get() {
return this.pageindex
},
set(val) {
this.$emit('update:pageindex', val)
}
},
limit: {
get() {
return this.pagesize
},
set(val) {
this.$emit('update:pagesize', val)
}
},
searchButton: {
get() {
return this.showSearch
},
set(val) {
this.$emit('update:showSearch', val)
}
},
showRefresh() {
return this.$listeners.hasOwnProperty('pagination')
},
columnList() {
let list = [], count = 0
if (this.columns.length) {
for (let column of this.columns) {
if (column.hasOwnProperty('prop') && column.prop !== '') {
const {label, prop} = column
let show = column.hasOwnProperty('show') ? column.show : true
if (show) {
count++
}
list.push({label, prop, show})
}
}
}
this.indeterminate = count !== 0;
this.columnsLength = list.length
if (this.columnsLength === count) {
this.selectAll = true
this.indeterminate = false
}
return list
}
},
data() {
return {
showFilterDialog: false,
checkedColumns: [],
indeterminate: false,
selectAll: false,
columnsLength: 0
}
},
mounted() {
},
methods: {
toggleRowSelection(row, selected) {
this.$refs[this.refName].toggleRowSelection(row, selected)
},
formatterIndex(row, column, cellValue, index) {
return (this.pageindex - 1) * this.pagesize + (index + 1)
},
pageSizeChange(val) {
this.$emit('pagination')
},
pageIndexChange(val) {
this.$emit('pagination')
},
handleSelectionChange(val) {
this.$emit('update:multipleSelection', val)
if (val.length) {
this.$emit('update:multipleSelectionFlag', true)
} else {
this.$emit('update:multipleSelectionFlag', false)
}
},
refreshData() {
this.$emit('pagination')
},
openFilter() {
this.showFilterDialog = true
},
submitChangeColumn() {
let length = this.checkedColumns.length
for (let index in this.columns) {
let temp = this.columns[index]
if (length === 0) {
temp['show'] = false
} else {
if (temp.hasOwnProperty('prop') && temp.prop !== '') {
temp['show'] = this.checkedColumns.includes(temp['prop']);
} else {
temp['show'] = true
}
}
this.columns.splice(index, 1, temp)
}
this.$refs[this.refName].doLayout();
this.showFilterDialog = false
},
handleCheckAll(bool) {
if (bool) {
this.checkedColumns = this.columnList.map(item => item.prop)
} else {
this.checkedColumns = []
}
}
}
}
</script>
<style lang="scss" scoped>
.enhanced-table {
&-page {
padding: 10px;
}
}
</style>
表格组件引入该组件
<script>
export default {
name: "ColumnItem",
functional: true,
props: {
formatter: {
type: Function
},
label: {
type: String,
default: ''
},
width: {
type: Number,
default: 0
}
},
render(h, context) {
const {formatter, label, width} = context.props
const attrs = {label}
if (formatter) {
attrs['formatter'] = formatter
}
if (width) {
attrs['width'] = width
} else {
attrs['minWidth'] = 60
}
return <el-table-column {...{attrs: attrs}}></el-table-column>
}
}
</script>
<style scoped>
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)