<template>
|
<div class="listCon-style">
|
<common-form :form="form" ref="form" @handle-Value="handleFormValue" :formLabel="formLabel"
|
:isExistBtn="isExistBtn" :showFormItem="showFormItem" :labelWidth="labelWidth"
|
:defaultPadding="defaultPadding" @handle-Label-Value="handleLabelValue">
|
<template slot="topForm" slot-scope="scope">
|
<slot name="topForm" :data="scope.data">
|
</slot>
|
</template>
|
<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>
|
<div class="tabItemSel">
|
<slot name="tabItem"></slot>
|
</div>
|
<el-table :data="tableData" border ref="table" v-on="$listeners" :row-key="dataKey"
|
@selection-change="handleSelectionChange" @select="handleSelect"
|
:row-class-name="rowClassName" :row-style="setRowStyle" class="tableStyle"
|
:expand-row-keys="entexpands" @expand-change="historicalEvaluation"
|
:header-cell-class-name="headerCellClassName" @select-all="handleSelectAll">
|
<el-table-column type="selection" v-if="multipleSelected" :reserve-selection="true"
|
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 ref="pageStyle" v-if="isShowPage" class="pageStyle">
|
<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>
|
<custom-scroll :visible="shouldShowScroll" v-if="isDisplayScroll" :boxWidth="boxWidth"
|
:contentWidth="contentWidth" :scrollLeft.sync="scrollLeft"></custom-scroll>
|
</div>
|
</div>
|
</template>
|
<script>
|
import commonForm from '@/components/formTemplate/commonForm.vue'
|
import { mapGetters } from 'vuex'
|
import customScroll from '@/components/scrollComponent/customScroll.vue'
|
|
export default {
|
components: {
|
commonForm, customScroll
|
},
|
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
|
},
|
/**
|
* 行样式style
|
*/
|
setRowStyle: {
|
type: Function,
|
default: null
|
},
|
sizes: {
|
type: Array,
|
default: function() {
|
return [10, 20, 30, 50]
|
}
|
},
|
/**
|
* 全选按钮是否不显示
|
*/
|
headerCellClassName: {
|
type: Function,
|
default: null
|
},
|
/**
|
* 复选框是否可被点击
|
*/
|
selectable: {
|
type: Function,
|
default: null
|
},
|
/**
|
* 无表单查询条件的情况下---是否存在按钮插槽
|
*/
|
isExistBtn: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* 是否展示自定义滚动条（主要针对弹出框）
|
*/
|
isDisplayScroll: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* 表单label宽度
|
*/
|
labelWidth: {
|
type: String,
|
default: '80px'
|
},
|
// 展开/收起控制
|
showFormItem: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* 默认padding值
|
*/
|
defaultPadding: {
|
type: String,
|
default: '40px 20px 12px'
|
},
|
/**
|
* 点击表格行是否可展开
|
*/
|
isClickRowExpand: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
*默认选中的值
|
*/
|
defaultValue: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
},
|
/**
|
* 数据行的键
|
*/
|
dataKey: {
|
type: String,
|
default: 'id'
|
},
|
/**
|
*展开行---是否隐藏其他行
|
*/
|
isHiddenRow: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
*查看条件变化，是否清空表格勾选项
|
*/
|
isClearCheckItem: {
|
type: Boolean,
|
default: true
|
},
|
// 分页参数
|
pageParams: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
pageInfo: {
|
pageNum: 1,
|
pageSize: this.sizes[0]
|
},
|
tableHeight: 300,
|
scrollWidth: 0,
|
scrollLeft: 0,
|
shouldShowScroll: true, // 是否展示滚动条,
|
boxWidth: '',
|
contentWidth: '',
|
selecedRow: [],
|
entexpands: [], // 展开行的 keys 数组
|
// 表格全量选择
|
indeterminate: false, // checkBox只负责样式控制
|
allCheck: false // 全选所有
|
}
|
},
|
computed: {
|
...mapGetters([
|
'mainContainerHeight'
|
])
|
},
|
watch: {
|
scrollLeft() {
|
this.dom = this.$refs.table.bodyWrapper
|
// 滚动距离
|
this.dom.scrollLeft = this.scrollLeft
|
},
|
tableData() {
|
this.$nextTick(this.updateCustomScroll)
|
},
|
'$refs.table.bodyWidth'() {
|
this.updateCustomScroll()
|
},
|
pageParams: {
|
handler() {
|
this.pageInfo.pageNum = this.pageParams.pageNum;
|
this.pageInfo.pageSize = this.pageParams.pageSize;
|
},
|
deep: true
|
},
|
},
|
methods: {
|
/**
|
* 设置表格选中状态
|
*/
|
setTableChecked(row, bool) {
|
const _this = this
|
_this.$nextTick(() => {
|
if (row) {
|
_this.$refs.table.toggleRowSelection(row, bool)
|
}
|
})
|
},
|
/**
|
* 当表单值改变时
|
*/
|
handleFormValue(data) {
|
this.$emit('handle-form-Value', data)
|
},
|
/**
|
* 当表单label值改变
|
*/
|
handleLabelValue(data) {
|
this.$emit('handle-Label-Value', data)
|
},
|
rowClassName({ row, rowIndex }) {
|
if (JSON.stringify(this.selecedRow).indexOf(JSON.stringify(row)) !== -1) {
|
return 'checkedTableRow'
|
}
|
},
|
/**
|
* 行选中事件处理
|
* @param {*} rows 行数据
|
*/
|
handleSelectionChange(rows) {
|
this.$emit('selected', rows)
|
this.selecedRow = rows
|
},
|
/**
|
* 当用户手动勾选全选 Checkbox 时触发的事件
|
* @param {*} rows 行数据
|
*/
|
handleSelectAll(selection) {
|
this.$emit('select-all', selection)
|
},
|
/**
|
*当用户手动勾选数据行的 Checkbox 时触发的事件
|
*/
|
handleSelect(selection, row) {
|
this.$emit('handle-selected', selection, row)
|
},
|
/**
|
*清空表格选择项
|
*/
|
clearTableSelected() {
|
if (this.multipleSelected) {
|
this.$refs.table.clearSelection()
|
}
|
},
|
/**
|
* 一页显示数量
|
*/
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val
|
this.onPageInfoChange()
|
},
|
/**
|
*查询当前页
|
*/
|
handleCurrentChange(val) {
|
this.pageInfo.pageNum = val
|
this.onPageInfoChange()
|
},
|
/**
|
* 重置分页数据
|
*/
|
resetTable() {
|
this.entexpands = []
|
this.pageInfo.pageNum = 1
|
this.pageInfo.pageSize = this.sizes[0]
|
},
|
/**
|
* 外部条件变化时处理
|
*/
|
handleConditionChange() {
|
this.resetTable()
|
this.onPageInfoChange()
|
},
|
/**
|
* 重置表单
|
*/
|
resetForm() {
|
this.$refs.form.resetForm()
|
},
|
/**
|
* 重置条件
|
*/
|
reloadCurrent() {
|
this.resetForm()
|
if (this.isClearCheckItem) {
|
this.clearTableSelected() // 清空表格勾选项
|
}
|
this.handleConditionChange()
|
},
|
/**
|
* 触发条件变化事件
|
*/
|
changeCondition() {
|
if (this.isClearCheckItem) {
|
this.clearTableSelected() // 清空表格勾选项
|
}
|
this.handleConditionChange()
|
},
|
/**
|
* 触发分页信息变化事件
|
*/
|
onPageInfoChange() {
|
this.$emit('page-info-change', this.pageInfo)
|
},
|
/**
|
* 获取分页信息
|
*/
|
getPageInfo() {
|
return this.pageInfo
|
},
|
resize() {
|
var that = this
|
that.tableHeight = that.mainContainerHeight - this.$refs.form.$el.clientHeight - this.$refs.pageStyle.clientHeight - 210
|
},
|
/**
|
* 初次加载以及滚动滚动条时判断是否展示滚动条
|
*/
|
isShowScroll() {
|
let rows = document.querySelectorAll('.el-table__row')
|
if (rows.length > 0) {
|
const rect = rows[rows.length - 1].getBoundingClientRect()
|
const viewportHeight = window.innerHeight || document.documentElement.clientHeight
|
|
this.shouldShowScroll = rect.bottom > viewportHeight
|
} else {
|
rows = document.querySelectorAll('.el-table__row')
|
this.shouldShowScroll = false
|
}
|
},
|
/**
|
* 展开当前行，上一条数据隐藏
|
*/
|
historicalEvaluation(row, expandedRows) {
|
var that = this
|
if (that.isHiddenRow) {
|
if (expandedRows.length) {
|
that.entexpands = []
|
if (row) {
|
that.entexpands.push(row[this.dataKey])
|
}
|
} else {
|
that.entexpands = []
|
}
|
}
|
this.$emit('expand-change', row, that.entexpands)
|
},
|
/**
|
* 获取table节点
|
*/
|
tableNode() {
|
return this.$refs.table
|
},
|
/**
|
* 监听最外面的滚动条（当滚动条滚动到底部，隐藏自定义滚动条）
|
*/
|
outermostScroll() {
|
const mainContainer = document.getElementById('main-container')
|
if (mainContainer) {
|
mainContainer.addEventListener('scroll', () => {
|
this.isShowScroll()
|
})
|
}
|
},
|
updateCustomScroll() {
|
setTimeout(() => {
|
this.boxWidth = getComputedStyle(this.$refs.table.bodyWrapper).width
|
this.contentWidth = getComputedStyle(this.$refs.table.bodyWrapper.querySelector('.el-table__body')).width
|
}, 100)
|
}
|
},
|
updated() {
|
this.isShowScroll()
|
},
|
mounted() {
|
const that = this
|
that.dom = that.$refs.table.bodyWrapper
|
window.addEventListener('resize', () => {
|
// 监听浏览器窗口
|
// 获取需要绑定的table
|
that.$nextTick(() => {
|
if (that.$refs.table) {
|
that.$refs.table.$nextTick(() => {
|
that.updateCustomScroll()
|
})
|
}
|
})
|
}, false)
|
that.dom.addEventListener('scroll', () => {
|
// 滚动距离
|
that.scrollLeft = that.dom.scrollLeft
|
})
|
this.outermostScroll()
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.operationSection {
|
background-color: #fff;
|
border-top-left-radius: 4px;
|
border-top-right-radius: 4px;
|
}
|
.tableStyle {
|
margin-top: 14px;
|
/deep/.el-table__expanded-cell {
|
.el-table__body-wrapper {
|
overflow-x: hidden !important;
|
}
|
}
|
/* 解决 elementUI 切换table后 el_table 固定列下方多了一条线 */
|
/deep/ .el-table__fixed,
|
/deep/ .el-table__fixed-right {
|
height: 100% !important; //设置高优先，以覆盖内联样式
|
}
|
}
|
/deep/.checkedTableRow {
|
background: #fff3e0 !important;
|
}
|
.main-b-style {
|
background-color: #fff;
|
border-radius: 4px;
|
padding: 20px 20px 76px;
|
}
|
</style>
|
