<template>
|
<div>
|
<common-form :form="form" style="margin-bottom:15px;" ref="form" :formLabel="formLabel"
|
:labelWidth="labelWidth" :showFormItem="showFormItem">
|
<template slot="otherElement" slot-scope="scope">
|
<slot name="otherElement" :data="scope.data">
|
</slot>
|
</template>
|
</common-form>
|
<div class="main-b-style">
|
<div class="operationSection">
|
<slot name="operationSection"></slot>
|
</div>
|
<el-table :data="tableData" border ref="table" :empty-text="emptyText"
|
@selection-change="handleSelectionChange" class="tableStyle">
|
<el-table-column type="selection" v-if="multipleSelected" label="全选" width="50"
|
:selectable="selectable"></el-table-column>
|
<el-table-column v-if="indexColumn" type="index" label="序号" width="50" align="center">
|
</el-table-column>
|
<slot name="columns"></slot>
|
</el-table>
|
<div class="pageStyle" v-if="isShowPage">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="pageInfo.pageNum" :page-sizes="sizes"
|
:page-size="pageInfo.pageSize"
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import commonForm from '@/components/formTemplate/commonForm.vue'
|
export default {
|
components: { commonForm },
|
props: {
|
/**
|
* 表单数据
|
*/
|
form: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
},
|
/**
|
*标签数据
|
*/
|
formLabel: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
/**
|
* 列表数据
|
*/
|
tableData: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
/**
|
* 是否包含索引列
|
*/
|
indexColumn: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* 数据总数
|
*/
|
total: {
|
type: Number,
|
default: 0
|
},
|
/**
|
* 是否多选
|
*/
|
multipleSelected: {
|
type: Boolean,
|
default: false
|
},
|
isShowPage: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* 表格空数据时显示文字
|
*/
|
emptyText: {
|
type: String,
|
default: '暂无数据'
|
},
|
/**
|
* 限制勾选个数
|
*/
|
limiteSelectedNum: {
|
type: Number,
|
default: null
|
},
|
/**
|
* label宽度
|
*/
|
labelWidth: {
|
type: String,
|
default: '80px'
|
},
|
// 展开/收起控制
|
showFormItem: {
|
type: Boolean,
|
default: false
|
},
|
},
|
data() {
|
return {
|
pageInfo: {
|
pageNum: 1,
|
pageSize: 10
|
},
|
sizes: [10, 20, 30, 50]
|
}
|
},
|
methods: {
|
/**
|
* 行选中事件处理
|
* @param {*} rows 行数据
|
*/
|
handleSelectionChange(rows) {
|
let selectList = rows
|
if (this.limiteSelectedNum && rows.length > this.limiteSelectedNum) {
|
// 截取前 this.limiteSelectedNum位
|
selectList = rows.slice(0, this.limiteSelectedNum)
|
// 截取 this.limiteSelectedNum位之后的数组 禁止选中
|
const tempArr = rows.slice(this.limiteSelectedNum)
|
if (tempArr.length !== 0) {
|
tempArr.forEach((ele) => {
|
this.$refs.table.toggleRowSelection(ele, false)
|
})
|
}
|
this.$message({
|
type: 'info',
|
message: `最多选择${this.limiteSelectedNum}条数据,请重新选择`
|
})
|
}
|
this.$emit('selected', selectList)
|
},
|
/**
|
*清空表格选择项
|
*/
|
clearTableSelected() {
|
this.$refs.table.clearSelection()
|
},
|
/**
|
* 设置复选框是否可勾选
|
*/
|
selectable(row, index) {
|
return 1
|
},
|
/**
|
* 一页显示数量
|
*/
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val
|
this.onPageInfoChange()
|
},
|
/**
|
*查询当前页
|
*/
|
handleCurrentChange(val) {
|
this.pageInfo.pageNum = val
|
this.onPageInfoChange()
|
},
|
/**
|
* 重置分页数据
|
*/
|
resetTable() {
|
this.pageInfo.pageNum = 1
|
this.pageInfo.pageSize = 10
|
},
|
/**
|
* 外部条件变化时处理
|
*/
|
handleConditionChange() {
|
this.resetTable()
|
this.onPageInfoChange()
|
},
|
/**
|
* 重置表单
|
*/
|
resetForm() {
|
this.$refs.form.resetForm()
|
},
|
/**
|
* 重置条件
|
*/
|
reloadCurrent() {
|
this.resetForm()
|
this.handleConditionChange()
|
},
|
/**
|
* 触发条件变化事件
|
*/
|
changeCondition() {
|
this.handleConditionChange()
|
},
|
/**
|
* 触发分页信息变化事件
|
*/
|
onPageInfoChange() {
|
this.$emit('page-info-change', this.pageInfo)
|
},
|
/**
|
* 获取分页信息
|
*/
|
getPageInfo() {
|
return this.pageInfo
|
}
|
}
|
// mounted () {
|
// this.onPageInfoChange()
|
// },
|
}
|
</script>
|
<style lang="scss" scoped>
|
.operationSection {
|
background-color: #fff;
|
border-top-left-radius: 4px;
|
border-top-right-radius: 4px;
|
}
|
.main-b-style {
|
background-color: #fff;
|
border-radius: 4px;
|
padding: 20px 20px 76px;
|
}
|
.tableStyle {
|
margin-top: 14px;
|
/* 解决 elementUI 切换table后 el_table 固定列下方多了一条线 */
|
/deep/ .el-table__fixed,
|
/deep/ .el-table__fixed-right {
|
height: 100% !important; //设置高优先，以覆盖内联样式
|
}
|
}
|
.el-pager li {
|
min-width: 32px;
|
height: 32px;
|
line-height: 32px;
|
background: #fff;
|
border-radius: 6px;
|
margin-right: 8px;
|
}
|
.el-pager li.active + li,
|
.el-pager li {
|
border: 1px solid #ddd;
|
}
|
.el-pager li.active {
|
color: #fff;
|
background: #d0261e !important;
|
}
|
.tableStyle {
|
margin-top: 14px;
|
}
|
</style>
|
