<template>
|
<div :class="['tableContainer', pages.show && tableData.length ? '' : 'noPageTable']" ref="tableContainer">
|
<div class="tableWrap" ref="tableWrap">
|
<template v-if="singleSelect">
|
<el-radio-group v-model="selectId" @change="selectIdChange">
|
<el-table class="dataTable" :tooltip-effect="tooltipStyle" :max-height="tableHeight" :row-class-name="tableRowClassName" stripe :header-row-class-name="tableHeaderClassName" :data="tableData" row-key="id" style="width: 100%" ref="table" @sort-change="sortData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
|
<el-table-column fixed :width="30">
|
<template slot-scope="scope">
|
<el-radio @click.native.prevent="clickitem(scope.row.id)" :label="scope.row.id"></el-radio>
|
</template>
|
</el-table-column>
|
<slot></slot>
|
</el-table>
|
</el-radio-group>
|
</template>
|
<template v-else>
|
<el-table @cell-dblclick="handleDblClick" class="dataTable" :tooltip-effect="tooltipStyle" :max-height="tableHeight" :row-class-name="tableRowClassName" stripe :header-row-class-name="tableHeaderClassName" :data="tableData" row-key="id" style="width: 100%" @select="handleSelect" @selection-change="handleSelectionChange" @select-all="handleSelectAll" ref="table" @sort-change="sortData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
|
<slot></slot>
|
</el-table>
|
</template>
|
</div>
|
<div class="pageWrap" v-if="pages.show && tableData">
|
<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="pages.currentPage" :page-sizes="pages.pageSizes" :page-size="pages.pageSize" :pager-count="pagerCount" :layout="pageLayout" :total="pages.total"></el-pagination>
|
</div>
|
<!-- 单击复制需要改输入框，隐藏了 -->
|
<textarea id="input" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"></textarea>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
tableMaxHeight: {
|
// 设置表格最大高度
|
type: String,
|
default: null
|
},
|
singleSelect: {
|
// 开启单选
|
type: Boolean,
|
default: false
|
},
|
tooltipStyle: {
|
// 提示框主题
|
type: String,
|
default: 'dark'
|
},
|
loading: {
|
// 是否显示加载中
|
type: Boolean,
|
default: false
|
},
|
tableData: {
|
// 表格数据
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
pageSizes: {
|
// 可选的pageSizes
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
pages: {
|
// 需要展示的page的控件的数组
|
type: Object,
|
default: function () {
|
return {}
|
}
|
},
|
tableRowClassName: {
|
// 表格行的类名
|
type: String,
|
default: 'rowClass'
|
},
|
tableHeaderClassName: {
|
// 表格表头的类名
|
type: String,
|
default: 'headClass'
|
},
|
defaultSelect: {
|
type: Number,
|
default: 0
|
},
|
defaultSelectArr: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
pageLayout: 'total, sizes, prev, pager, next, jumper',
|
pagerCount: 5,
|
multipleTableSelection: [], // 存放选中值的数组
|
tableHeight: 150,
|
pagination: {},
|
originalSelectPageNow: [], // 已选中项回显数据
|
delSelection: [], // 当前删除的数据
|
selectId: ''
|
}
|
},
|
computed: {
|
screenSize() {
|
return this.$store.state.screenSize
|
}
|
},
|
watch: {
|
loading: {
|
handler(newV, oldV) {
|
// console.log(newV)
|
if (newV) {
|
this.showLoading({
|
target: this.$refs.tableContainer
|
})
|
} else {
|
this.hideLoading()
|
}
|
}
|
},
|
tableData: {
|
handler(newV, oldV) {
|
// console.log(newV)
|
this.$refs.table.doLayout()
|
const initSelection = []
|
if (this.defaultSelectArr.length) {
|
this.defaultSelectArr.forEach(item => {
|
newV.forEach((val, index) => {
|
if (val.id === item) {
|
this.multipleTableSelection.push(val)
|
}
|
})
|
})
|
}
|
this.multipleTableSelection.forEach(row => {
|
newV.forEach((val, index) => {
|
if (row.id === val.id) {
|
initSelection.push(val)
|
}
|
})
|
})
|
// console.log(initSelection)
|
this.originalSelectPageNow = [...initSelection]
|
this.$nextTick(() => {
|
if (this.multipleTableSelection.length) {
|
initSelection.forEach(row => {
|
newV.forEach((val, index) => {
|
if (row.id === val.id) {
|
this.$refs.table.toggleRowSelection(
|
this.$refs.table.data[index],
|
true
|
)
|
}
|
})
|
})
|
}
|
})
|
this.initTableHeight()
|
},
|
deep: true
|
},
|
screenSize(newV) {
|
this.initTableHeight()
|
}
|
},
|
created() {},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
if (this.singleSelect) {
|
this.selectId = this.defaultSelect
|
}
|
this.$nextTick(() => {
|
if (this.loading) {
|
this.showLoading({
|
target: this.$refs.tableContainer
|
})
|
}
|
this.initTableHeight()
|
})
|
},
|
initTableHeight() {
|
this.$nextTick(() => {
|
this.tableHeight = this.tableMaxHeight || (this.pages.show && this.tableData.length ? this.$refs.tableContainer.clientHeight - 80 : this.$refs.tableContainer.clientHeight)
|
})
|
},
|
handleSizeChange(val) {
|
// pageSize变化时函数
|
this.$emit('sizeChange', val)
|
},
|
handleCurrentChange(val) {
|
// 当前页变化时函数
|
this.$emit('currentChange', val)
|
},
|
handleSelect(selection, row) {
|
// console.log('1111', selection)
|
// console.log(this.tableData)
|
// console.log(this.multipleTableSelection)
|
let initSelection = []
|
this.delSelection = []
|
if (this.multipleTableSelection.length > selection.length) {
|
this.multipleTableSelection.forEach(item => {
|
this.tableData.forEach((val, index) => {
|
if (val.id === item.id) {
|
initSelection.push(val)
|
}
|
})
|
})
|
} else {
|
initSelection = [...selection]
|
}
|
// console.log(initSelection)
|
this.originalSelectPageNow = [...initSelection]
|
this.handlerSelectionArr(selection)
|
},
|
// 多选框的选项变化触发函数
|
handleSelectionChange(selection) {
|
// console.log(this.defaultSelectArr)
|
// console.log('2222', selection)
|
this.$emit('multipleSelectChange', selection)
|
},
|
handleSelectAll(selection) {
|
// console.log(selection)
|
if (selection.length) {
|
this.delSelection = []
|
this.originalSelectPageNow = [...selection]
|
}
|
this.handlerSelectionArr(selection)
|
},
|
handlerSelectionArr1(selection) {
|
const multipleTableSelection = [...this.multipleTableSelection]
|
const originalSelectPageNow = [...this.originalSelectPageNow]
|
const delSelection = [...this.delSelection]
|
originalSelectPageNow.forEach(val => {
|
let delFlag = true
|
selection.forEach(val2 => {
|
if (val.id === val2.id) {
|
delFlag = false
|
}
|
})
|
if (delFlag) {
|
delSelection.push(val)
|
}
|
})
|
this.delSelection = [...delSelection]
|
// console.log(delSelection)
|
const selectConcat = [...multipleTableSelection, ...selection]
|
var selectBeforeDel = []
|
selectConcat.forEach(val => {
|
let flag = true
|
selectBeforeDel.forEach(val2 => {
|
if (val.id === val2.id) {
|
flag = false
|
}
|
})
|
if (flag) selectBeforeDel.push(val)
|
})
|
const selectedAll = []
|
selectBeforeDel.forEach(val => {
|
let flag = true
|
delSelection.forEach(val2 => {
|
if (val.id === val2.id) {
|
flag = false
|
}
|
})
|
if (flag) selectedAll.push(val)
|
})
|
// console.log(selectedAll)
|
this.multipleTableSelection = [...selectedAll]
|
this.$emit('selectChange', selectedAll)
|
},
|
handlerSelectionArr(selection) {
|
// console.log(selection)
|
// console.log(this.multipleTableSelection)
|
// console.log(this.originalSelectPageNow)
|
// console.log(this.delSelection)
|
const multipleTableSelection = [...this.multipleTableSelection]
|
const originalSelectPageNow = [...this.originalSelectPageNow]
|
const delSelection = [...this.delSelection]
|
originalSelectPageNow.forEach(val => {
|
let delFlag = true
|
selection.forEach(val2 => {
|
if (val.id === val2.id) {
|
delFlag = false
|
}
|
})
|
if (delFlag) {
|
delSelection.push(val)
|
}
|
})
|
this.delSelection = [...delSelection]
|
// console.log(delSelection)
|
const selectConcat = [...multipleTableSelection, ...selection]
|
// console.log(selectConcat)
|
var selectBeforeDel = []
|
selectConcat.forEach(val => {
|
let flag = true
|
selectBeforeDel.forEach(val2 => {
|
if (val.id === val2.id) {
|
flag = false
|
}
|
})
|
if (flag) selectBeforeDel.push(val)
|
})
|
// console.log(selectBeforeDel)
|
// console.log(delSelection)
|
const selectedAll = []
|
const selectedIds = []
|
selectBeforeDel.forEach(val => {
|
let flag = true
|
delSelection.forEach(val2 => {
|
if (val.id === val2.id) {
|
flag = false
|
}
|
})
|
if (flag) selectedAll.push(val)
|
if (flag) selectedIds.push(val.termId)
|
})
|
// console.log(selectedAll)
|
this.multipleTableSelection = [...selectedAll]
|
// 处理回显
|
const selectedAllIds = []
|
const defaultSelectArr = [...selectedIds, ...this.defaultSelectArr]
|
defaultSelectArr.forEach(val => {
|
let flag = true
|
delSelection.forEach(val2 => {
|
if (val === val2.termId) {
|
flag = false
|
}
|
})
|
if (flag) selectedAllIds.push(val)
|
})
|
// console.log([...new Set(selectedAllIds)])
|
this.$emit('selectChange', [...new Set(selectedAllIds)])
|
},
|
selectIdChange(id) {
|
this.$emit('selectChange', this.selectId)
|
},
|
clickitem(id) {
|
id === this.selectId ? this.selectId = 0 : this.selectId = id
|
// console.log(this.selectId)
|
this.$emit('selectChange', this.selectId)
|
},
|
sortData({
|
column,
|
prop,
|
order
|
}) {
|
const searchParams = {
|
order: order ? (order === 'ascending' ? 'asc' : 'desc') : '',
|
sort: order ? prop : ''
|
}
|
this.$emit('sortChange', searchParams)
|
},
|
// 双击表格复制内容
|
handleDblClick(row, column, cell, event) {
|
if (column.property) {
|
var text = event.target.innerText
|
var input = document.getElementById('input')
|
input.value = text // 修改文本框的内容
|
input.select() // 选中文本
|
document.execCommand('copy') // 执行浏览器复制命令
|
this.msg.success('复制成功')
|
// Notification.success({
|
// title: `${text}`,
|
// message: '已复制到剪贴板'
|
// // showClose: false
|
// })
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tableContainer {
|
height: 100%;
|
box-sizing: border-box;
|
padding-bottom: 80px;
|
position: relative;
|
|
&.noPageTable {
|
padding-bottom: 0;
|
}
|
|
.pageWrap {
|
position: absolute;
|
width: 100%;
|
text-align: center;
|
height: 36px;
|
bottom: 20px;
|
}
|
}
|
</style>
|
<style lang="scss">
|
.tableContainer {
|
.el-table__body-wrapper {
|
.el-table__empty-block{
|
// @include background_color('main_back');
|
}
|
}
|
|
// 表格滚动条的宽度
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 6px; // 横向滚动条
|
height: 6px; // 纵向滚动条
|
background: none;
|
}
|
|
// 表格滚动条的滑块
|
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
// @include background_color('sub_color');
|
border-radius: 8px;
|
}
|
|
.el-table__body-wrapper::-webkit-scrollbar-track-piece {
|
// @include background_color('sys_back');
|
}
|
|
.tableWrap {
|
.el-table{
|
// @include background_color('main_back');
|
}
|
.dataTable {
|
&::before {
|
background: none;
|
}
|
|
tr {
|
// @include background_color('main_back');
|
}
|
|
.el-table__body {
|
width: 100% !important;
|
.el-table__row.hover-row {
|
td {
|
// @include background_color('sys_back');
|
}
|
}
|
|
tr.current-row {
|
&>td {
|
// @include background_color('sys_back');
|
}
|
}
|
}
|
|
.el-table__row--striped {
|
td {
|
// @include background_color('sys_back');
|
}
|
}
|
|
.headClass {
|
// @include font_color('font_color3');
|
|
th {
|
padding: 9px 0;
|
// @include background_color('sys_back');
|
border: none;
|
font-weight: normal;
|
}
|
}
|
|
.rowClass {
|
// @include font_color('font_color1');
|
&:hover {
|
td{
|
// @include background_color('sys_back');
|
}
|
}
|
td {
|
border: none;
|
padding: 16px 0;
|
}
|
}
|
|
.el-table__fixed-right::before,
|
.el-table__fixed::before {
|
display: none;
|
}
|
|
.el-table__fixed-right-patch {
|
border: none;
|
// @include background_color('sys_back');
|
}
|
}
|
|
.el-table .descending .sort-caret.descending {
|
border-top-color: none;
|
}
|
|
.el-table .ascending .sort-caret.ascending {
|
border-bottom-color: none;
|
}
|
}
|
|
.pageWrap {
|
.el-pagination {
|
padding: 0;
|
|
.el-pagination__total {
|
// @include font_color('font_color3');
|
height: 36px;
|
line-height: 36px;
|
}
|
|
.el-pagination__sizes {
|
height: 36px;
|
line-height: 34px;
|
|
.el-select {
|
.el-input {
|
.el-input__inner {
|
height: 36px;
|
background: none;
|
border-radius: 8px;
|
// @include font_color('font_color3');
|
|
&:focus {
|
// @include border_color('default_color');
|
}
|
|
&:hover {
|
// @include border_color('default_color');
|
}
|
}
|
|
.el-input__suffix {
|
right: -7px;
|
line-height: 36px;
|
|
.el-select__caret {
|
line-height: 36px;
|
}
|
}
|
}
|
}
|
}
|
|
.btn-prev,
|
.btn-next {
|
background: none;
|
height: 36px;
|
line-height: 34px;
|
border-radius: 8px;
|
border: 1px solid #d6dbee;
|
// @include border_color('sub_color');
|
width: 36px;
|
color: #7c8093;
|
|
&:hover {
|
// @include font_color('default_color');
|
border: 1px solid;
|
// @include border_color('default_color');
|
}
|
|
&[disabled='disabled'] {
|
// @include font_color('sub_color');
|
border: 1px solid;
|
// @include border_color('sub_color');
|
|
&:hover {
|
// @include font_color('sub_color');
|
border: 1px solid;
|
// @include border_color('sub_color');
|
}
|
}
|
}
|
|
.el-pager {
|
li {
|
background: none;
|
// width: 36px;
|
height: 36px;
|
line-height: 34px;
|
// color: rgba(0, 0, 0, 0.65);
|
// @include font_color('font_color3');
|
border: 1px solid;
|
// @include border_color('sub_color');
|
border-radius: 8px;
|
min-width: 36px;
|
padding: 0 8px;
|
|
&:hover {
|
// @include font_color('font_color2');
|
// @include background_color('default_color');
|
// @include border_color('default_color');
|
}
|
|
&.active {
|
// @include font_color('font_color2');
|
// @include background_color('default_color');
|
// @include border_color('default_color');
|
}
|
}
|
}
|
|
.el-pagination__jump {
|
height: 36px;
|
|
.el-input {
|
margin: 0 6px;
|
|
.el-input__inner {
|
background: none;
|
height: 36px;
|
border-radius: 8px;
|
}
|
}
|
}
|
}
|
}
|
.el-loading-mask{
|
// @include background_color('loadingMask_back');
|
}
|
}
|
</style>
|
|
