<template>
|
<div class="pro_create_table">
|
<el-table :data="list"
|
v-loading="loading"
|
ref="proTable"
|
header-cell-class-name="header_cell"
|
cell-class-name="table_cell"
|
highlight-current-row
|
:row-class-name="tableRowClassName"
|
@selection-change="handleSelectionChange"
|
@current-change="handleRowCurrentChange">
|
<el-table-column type="selection"
|
v-if="isMultipleSelect"
|
width="70">
|
</el-table-column>
|
<!-- 序号 -->
|
<el-table-column v-if="isAutoIndex"
|
label=" "
|
:fixed="header[0].fixed || false"
|
type="index"
|
:width="indexItemWidth"></el-table-column>
|
|
<el-table-column v-for="(item, index) in header"
|
:key="index"
|
:prop="item.prop"
|
:type="item.type"
|
:label="item.label"
|
:width="item.width || defaultWidth"
|
align="left"
|
:fixed="item.fixed || false">
|
<div slot-scope="scope"
|
class="item-inner">
|
<p v-if="item.type === 'radio'"
|
@change="handleRadioChange(scope.row)">
|
<el-radio v-model="checkedRadio"
|
:label="scope.row.value"> </el-radio>
|
</p>
|
<p v-else-if="item.type === 'link'">
|
<el-link :underline="false"
|
type="text"
|
@click="$emit('doAction', item.prop, scope.row, index)">{{ item.isNotProp ? item.label : scope.row[item.prop] }}</el-link>
|
</p>
|
<!-- links 文本固定的情况 -->
|
<p v-else-if="item.type === 'links'"
|
class="buttons-links">
|
<el-link :underline="false"
|
type="text"
|
v-for="(linkText, linkIndex) in item.links"
|
@click="$emit('doAction', item.prop, scope.row, linkIndex)"
|
:key="linkIndex">{{ linkText }}</el-link>
|
</p>
|
<!-- links 文本随每列数据动态变化的情况 -->
|
<p class="buttons-wraper"
|
v-else-if="
|
item.type === 'buttons' && Array.isArray(scope.row[item.prop])
|
">
|
<el-button type="text"
|
size="small"
|
v-if="
|
scope.row[item.prop].filter(({ value }) => value).length > 0
|
"
|
@click="
|
$emit(
|
'doAction',
|
item.prop,
|
scope.row,
|
typeof scope.row[item.prop].filter(
|
({ value }) => value
|
)[0] === 'object'
|
? scope.row[item.prop].filter(({ value }) => value)[0]
|
: 0
|
)
|
">{{
|
typeof scope.row[item.prop].filter(({ value }) => value)[0] ===
|
"object"
|
? scope.row[item.prop].filter(({ value }) => value)[0].label
|
: ""
|
}}</el-button>
|
<span class="button-select-disabled"
|
v-if="
|
scope.row[item.prop].filter(({ value }) => value).length === 1
|
">更多<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-button type="text"
|
size="small"
|
class="two-but"
|
v-if="
|
scope.row[item.prop].filter(({ value }) => value).length === 2
|
"
|
@click="
|
$emit(
|
'doAction',
|
item.prop,
|
scope.row,
|
typeof scope.row[item.prop].filter(
|
({ value }) => value
|
)[1] === 'object'
|
? scope.row[item.prop].filter(({ value }) => value)[1]
|
: 1
|
)
|
">{{
|
typeof scope.row[item.prop].filter(({ value }) => value)[1] ===
|
"object"
|
? scope.row[item.prop].filter(({ value }) => value)[1].label
|
: scope.row[item.prop].filter(({ value }) => value)[1]
|
}}</el-button>
|
<el-popover placement="bottom-start"
|
popper-class="table_btn_popover"
|
:offset="60"
|
trigger="hover"
|
v-if="
|
scope.row[item.prop].filter(({ value }) => value).length > 2 &&
|
isShowMore
|
">
|
<p class="more-buttons">
|
<el-button type="text"
|
size="small"
|
v-for="(buttonItem, buttonIndex) in scope.row[item.prop]
|
.filter(({ value }) => value)
|
.slice(1)"
|
:key="buttonIndex"
|
@click="
|
$emit(
|
'doAction',
|
item.prop,
|
scope.row,
|
typeof buttonItem === 'object'
|
? buttonItem
|
: buttonIndex + 1
|
)
|
">{{
|
typeof buttonItem === "object"
|
? buttonItem.label
|
: buttonItem
|
}}</el-button>
|
</p>
|
<span class="button-select"
|
slot="reference">
|
更多
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
</el-popover>
|
</p>
|
<p v-else-if="item.type === 'button'">
|
<el-button :underline="false"
|
type="text"
|
size="small"
|
@click="$emit('doAction', item.prop, scope.row, index)">{{
|
item.isNotProp ? item.label : scope.row[item.prop]
|
}}</el-button>
|
</p>
|
<p v-else-if="item.type === 'rate'"
|
:class="{ changeCol: scope.row.changeflag && !noHistory }">
|
{{ scope.row[item.prop] | formatterRate }}
|
</p>
|
<p v-else
|
:class="{ changeCol: scope.row.changeflag && !noHistory }">
|
{{ scope.row[item.prop] | showValue }}
|
</p>
|
</div>
|
</el-table-column>
|
</el-table>
|
<div v-if="isShowPages && pageInfo.total > 0"
|
class="pagination">
|
<el-pagination background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageInfo.currentPage"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageInfo.size"
|
layout="prev, pager, next, jumper, total, sizes"
|
:total="total || pageInfo.total"></el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
list: {
|
type: Array,
|
default: () => []
|
},
|
header: {
|
type: Array,
|
default: () => []
|
},
|
pageInfo: {
|
type: Object,
|
default: () => {
|
return {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
}
|
}
|
},
|
// 总页数
|
total: {
|
type: Number,
|
default: 0
|
},
|
// 表格高度，用于固定表头信息
|
height: {
|
type: String,
|
default: '640px'
|
},
|
// 是否展示分页信息
|
isShowPages: {
|
type: Boolean,
|
default: true
|
},
|
// 是否展示合计栏
|
isShowSummary: {
|
type: Boolean,
|
default: false
|
},
|
// 标题
|
title: {
|
type: String,
|
default: ''
|
},
|
// 是否展示分页信息
|
loading: {
|
type: Boolean,
|
default: false
|
},
|
// 是否增加序号行
|
isAutoIndex: {
|
type: Boolean,
|
default: false
|
},
|
// 是否支持多选
|
isMultipleSelect: {
|
type: Boolean,
|
default: false
|
},
|
// 是否支持单选
|
isRadio: {
|
type: Boolean,
|
default: false
|
},
|
indexItemWidth: {
|
type: Number,
|
default: 60
|
},
|
isShowMore: {
|
type: Boolean,
|
default: true
|
},
|
noHistory: {
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: [Number, String],
|
default: '100%'
|
}
|
},
|
watch: {
|
list: {
|
handler (val, oldVal) {
|
this.list = val
|
},
|
deep: true
|
},
|
header: {
|
handler (val, oldVal) {
|
this.header = val
|
},
|
deep: true
|
}
|
},
|
data () {
|
return {
|
// 默认每列宽度
|
defaultWidth: '150px',
|
currentRow: null,
|
checkedRadio: false
|
}
|
},
|
filters: {
|
showValue (val = '') {
|
return val.toString().trim() === '' ? '--' : val
|
},
|
formatterRate (val = '') {
|
return val.toString().trim() === '' ? '--' : val + '%'
|
}
|
},
|
methods: {
|
tableRowClassName ({ row }) {
|
if (row.checked) {
|
return 'highlight-row'
|
}
|
},
|
getCurrentRow (index) {
|
this.radio = index
|
},
|
handleRadioChange (selRow) {
|
this.checkedRadio = selRow.value
|
this.$emit('handleRowCurrentChange', selRow)
|
},
|
handleSelectionChange (val) {
|
this.$emit('handleSelectionChange', val)
|
},
|
handleSizeChange (val) {
|
this.$emit('handleSizeChange', val)
|
},
|
handleRowCurrentChange (selRow) {
|
if (!selRow) {
|
return false
|
}
|
this.currentRow = selRow
|
this.checkedRadio = selRow.value
|
this.$refs.proTable.setCurrentRow(selRow)
|
this.$emit('handleRowCurrentChange', selRow)
|
},
|
handleCurrentChange (val) {
|
this.$emit('handleCurrentChange', val)
|
},
|
clickButton (info) {
|
const { prop, row, item } = info
|
this.$emit('doAction', prop, row, item)
|
}
|
}
|
}
|
</script>
|
<style lang="postcss">
|
.table_btn_popover {
|
min-width: 100px;
|
padding: 10px;
|
& .more-buttons {
|
display: flex;
|
justify-content: space-around;
|
}
|
}
|
.pro_create_table {
|
padding-bottom: 50px;
|
padding-right: 8px;
|
& .highlight-row {
|
background: #a3cdf1;
|
}
|
& .highlight-row:hover {
|
background: #a3cdf1;
|
}
|
& .table_cell {
|
height: 48px;
|
padding: 0;
|
& .cell {
|
line-height: 18px;
|
& .changeCol {
|
color: #f56c6c;
|
}
|
}
|
}
|
& .header_cell {
|
height: 47px;
|
padding: 0;
|
background-color: #fafafa;
|
& .cell {
|
line-height: 20px;
|
color: #222222;
|
}
|
}
|
& >>> .el-table th {
|
background: #fafafa;
|
color: #222222;
|
padding: 0;
|
border-color: #eee;
|
}
|
& >>> .el-table tr {
|
height: 48px;
|
line-height: 48px;
|
}
|
& >>> .el-table tr th {
|
line-height: 44px;
|
}
|
& >>> .el-table td {
|
color: #666666;
|
border-color: #eee;
|
padding: 0;
|
height: 48px;
|
/* & .el-button {
|
margin-right: 20px;
|
} */
|
}
|
& a {
|
color: #0081f0;
|
cursor: pointer;
|
}
|
& >>> .item-inner p {
|
padding: 0;
|
margin: 0;
|
}
|
& >>> .item-inner p .el-button + .el-button {
|
padding-left: 20px;
|
}
|
& >>> .el-table__body-wrapper {
|
&::-webkit-scrollbar {
|
height: 10px;
|
width: 10px;
|
}
|
&::-webkit-scrollbar-track-piece {
|
}
|
&::-webkit-scrollbar-track-piece {
|
}
|
&::-webkit-scrollbar-track {
|
border-radius: 1em;
|
/* background-color: rgba(50, 50, 50, 0.1); */
|
background-color: #ffffff;
|
}
|
&::-webkit-scrollbar-thumb {
|
border-radius: 1em;
|
/* background-color: rgba(50, 50, 50, 0.2); */
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
}
|
& .pagination {
|
padding: 20px 0;
|
color: #666666;
|
& >>> .el-pagination__total {
|
margin-left: 20px;
|
font-size: 14px;
|
color: #666666;
|
}
|
& >>> .el-pager li {
|
width: auto;
|
min-width: 32px;
|
height: 32px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 4px;
|
border: 1px solid rgba(238, 238, 238, 1);
|
font-size: 14px;
|
color: #666666;
|
font-weight: normal;
|
/* min-width: 34px; */
|
}
|
& >>> .el-pagination__jump {
|
font-size: 14px;
|
color: #666666;
|
}
|
& >>> .btn-next,
|
& >>> .btn-prev {
|
width: 32px;
|
height: 32px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 4px;
|
border: 1px solid rgba(238, 238, 238, 1);
|
font-size: 14px;
|
color: #666666;
|
}
|
& >>> .btn-next:disabled,
|
& >>> .btn-prev:disabled {
|
opacity: 0.6;
|
}
|
}
|
& .buttons-links >>> .el-link {
|
margin-right: 20px;
|
&:last-child {
|
margin: 0;
|
}
|
}
|
& .button-select {
|
cursor: pointer;
|
color: #0081f0;
|
margin-left: 20px;
|
& >>> .el-icon--right {
|
margin: 0;
|
}
|
}
|
& .button-select-disabled {
|
color: #c5c5c5;
|
margin-left: 20px;
|
& .el-icon-arrow-down {
|
margin-left: 10px;
|
}
|
}
|
& p.buttons-wraper {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding-right: 0px;
|
& .two-but {
|
margin-left: 20px;
|
}
|
}
|
}
|
</style>
|
