<template>
|
<div class="list-table" :class="{'padding-right': isPaddingRight}">
|
<SectionTitle v-if="title" :title="title"></SectionTitle>
|
<!-- :height="showHeight" -->
|
<el-table
|
ref="commTable"
|
stripe
|
:data="showList"
|
:style="{width: showWidth}"
|
v-loading="loading"
|
:show-summary="isShowSummary"
|
:summary-method="getSummaries"
|
:max-height="maxHeight"
|
@selection-change="handleSelectionChange"
|
:row-class-name="selectClassName"
|
highlight-current-row
|
:row-key="value=>getRowKeys(value, rowKey)"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
v-if="isMultipleSelect"
|
:reserve-selection="isReserve">
|
</el-table-column>
|
|
<!-- 序号 -->
|
<el-table-column
|
label=" "
|
:fixed="header[0].fixed || false"
|
type="index"
|
:width="indexItemWidth"
|
v-if="isAutoIndex"
|
></el-table-column>
|
|
<el-table-column
|
v-for="(item, index) in header"
|
:key="index"
|
:prop="item.prop"
|
:label="item.label"
|
:width="item.width || defaultWidth"
|
:align="item.align || 'left'"
|
:fixed="item.fixed || false"
|
:show-overflow-tooltip="item.showTooltip || false"
|
>
|
<div slot-scope="scope" class="item-inner">
|
<p v-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.buttons)"
|
>
|
<el-button
|
type="text"
|
v-if="scope.row.buttons.length > 0"
|
:disabled="typeof scope.row.buttons[0] === 'object' ? scope.row.buttons[0].disabled : false"
|
@click="$emit('doAction', item.prop, scope.row, typeof scope.row.buttons[0] === 'object' ? scope.row.buttons[0] : 0)"
|
>{{ typeof scope.row.buttons[0] === 'object' ? scope.row.buttons[0].label : scope.row.buttons[0]}}</el-button>
|
<span
|
class="button-select-disabled"
|
v-if="scope.row.buttons.length === 1 && isShowMore"
|
>更多</span>
|
<el-button
|
type="text"
|
v-if="scope.row.buttons.length === 2"
|
@click="$emit('doAction', item.prop, scope.row, typeof scope.row.buttons[1] === 'object' ? scope.row.buttons[1] : 1)"
|
>{{ typeof scope.row.buttons[1] === 'object' ? scope.row.buttons[1].label : scope.row.buttons[1]}}</el-button>
|
<el-popover
|
placement="bottom"
|
popper-class="table-buttons-popover"
|
trigger="hover"
|
v-if="scope.row.buttons.length > 2 && isShowMore"
|
>
|
<el-button
|
type="text"
|
v-for="(buttonItem, buttonIndex) in scope.row.buttons.filter((but, butInd)=> butInd > 0)"
|
:key="buttonIndex"
|
:disabled="typeof buttonItem === 'object' ? buttonItem.disabled : false"
|
@click="$emit('doAction', item.prop, scope.row, typeof buttonItem === 'object' ? buttonItem : buttonIndex + 1)"
|
>{{ typeof buttonItem === 'object' ? buttonItem.label : buttonItem}}</el-button>
|
<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"
|
@click="$emit('doAction', item.prop, scope.row, index)"
|
>{{ item.isNotProp ? item.label : scope.row[item.prop] }}</el-button>
|
</p>
|
<!-- 这里增加部分文字展示过长显示省略号 -->
|
<p v-else :class="{ showTooltip:item.showTooltip }">{{ scope.row[item.prop] | showValue }}</p>
|
</div>
|
</el-table-column>
|
</el-table>
|
<div v-if="isShowPages" 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>
|
import SectionTitle from './SectionTitle'
|
export default {
|
components: {
|
SectionTitle
|
},
|
props: {
|
/**
|
* 列表信息
|
* @example
|
* [{"curoperateorgname": "信贷产品部", "serialNo": "2019070900000001"}]
|
*/
|
list: {
|
type: Array,
|
default: () => []
|
},
|
|
activeIndex: {
|
type: Array,
|
default: () => []
|
},
|
|
/**
|
* 字段映射说明头
|
* @example
|
* [ { "prop": "serialNo", "label": "申请编号", "width": "300px", "fixed": true, "type": "link" }]
|
*/
|
header: {
|
type: Array,
|
default: () => []
|
},
|
|
// page信息
|
pageInfo: {
|
type: Object,
|
default: () => {
|
return {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
}
|
}
|
},
|
|
// 总页数
|
total: {
|
type: Number,
|
default: 0
|
},
|
|
// 是否展示分页信息
|
isShowPages: {
|
type: Boolean,
|
default: true
|
},
|
|
// 是否展示合计栏
|
isShowSummary: {
|
type: Boolean,
|
default: false
|
},
|
|
// 表格最大高度
|
maxHeight: {
|
type: Number,
|
default: 640
|
},
|
|
// 标题
|
title: {
|
type: String,
|
default: ''
|
},
|
|
// 是否展示分页信息
|
loading: {
|
type: Boolean,
|
default: false
|
},
|
|
// 是否增加序号行
|
isAutoIndex: {
|
type: Boolean,
|
default: false
|
},
|
|
// 是否支持多选
|
isMultipleSelect: {
|
type: Boolean,
|
default: false
|
},
|
|
indexItemWidth: {
|
type: Number,
|
default: 40
|
},
|
|
isShowMore: {
|
type: Boolean,
|
default: true
|
},
|
|
// 是否右边有padding值
|
isPaddingRight: {
|
type: Boolean,
|
default: true
|
},
|
|
// width: {
|
// type: [Number, String],
|
// default: '100%'
|
// },
|
// row-key
|
rowKey: {
|
type: String,
|
default: null
|
},
|
// 是否在数据更新之后保留之前选中的数据（需指定 row-key）
|
isReserve: {
|
type: Boolean,
|
default: false
|
},
|
},
|
data() {
|
return {
|
// 默认每列宽度
|
defaultWidth: '150px',
|
getRowKeys(row, rkey) {
|
return row[rkey]
|
}
|
}
|
},
|
filters: {
|
showValue(val = '') {
|
return val.toString().trim() === '' ? '--' : val
|
}
|
},
|
methods: {
|
handleSelectionChange(array) {
|
this.$emit('handleSelectionChange', array)
|
},
|
selectClassName({ row, rowIndex }) {
|
let color = ''
|
this.activeIndex.forEach(val => {
|
if (rowIndex === val) {
|
color = 'select-row'
|
}
|
})
|
return color
|
},
|
handleSizeChange(val) {
|
this.$emit('handleSizeChange', val)
|
},
|
handleCurrentChange(val) {
|
this.$emit('handleCurrentChange', val)
|
},
|
// 格式化金额
|
getMoney(money) {
|
if (money && money != null) {
|
money = String(money)
|
let left = money.split('.')[0]
|
let right = money.split('.')[1]
|
right = right
|
? right.length >= 2
|
? '.' + right.substr(0, 2)
|
: '.' + right + '0'
|
: '.00'
|
var temp = left
|
.split('')
|
.reverse()
|
.join('')
|
.match(/(\d{1,3})/g)
|
return (
|
(Number(money) < 0 ? '-' : '') +
|
temp
|
.join(',')
|
.split('')
|
.reverse()
|
.join('') +
|
right
|
)
|
} else if (Number(money) === 0) {
|
// 注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
|
return '0.00'
|
} else {
|
return ''
|
}
|
},
|
getSummaries() {
|
const { list, header, isShowSummary, isAutoIndex } = this
|
let result = []
|
if (isShowSummary) {
|
// 合计处理
|
result = header.reduce((pre, { prop, isMoney }, index) => {
|
let str = ''
|
if (isMoney) {
|
str = list.reduce((listPre, listItem) => {
|
const temp = isNaN(listItem[prop]) ? 0 : Number(listItem[prop])
|
return Number(listPre) + temp
|
}, 0)
|
str = this.getMoney(Number(str.toFixed(2)))
|
}
|
pre.push(str)
|
return pre
|
}, [])
|
}
|
if (isAutoIndex) {
|
result = ['小计', ...result]
|
} else {
|
result[0] = '小计'
|
}
|
return result
|
},
|
clickButton(info) {
|
const { prop, row, item } = info
|
this.$emit('doAction', prop, row, item)
|
},
|
// 清除选中状态行
|
clearTableSelection() {
|
this.$refs.commTable.clearSelection();
|
},
|
},
|
computed: {
|
showList() {
|
const { list, header } = this
|
// 列表涉及利率后面需要带上%,金额需要格式化
|
const props = header.reduce((pre, prop) => {
|
if (prop.isMoney || prop.isRate) {
|
pre.push(prop)
|
}
|
return pre
|
}, [])
|
return list.reduce((pre, curr) => {
|
const item = Object.keys(curr).reduce((pre, key) => {
|
let val = curr[key]
|
props.forEach(value => {
|
if (value.prop == key && value.isMoney) {
|
val = this.getMoney(parseFloat(val))
|
}
|
if (value.prop == key && value.isRate) {
|
val = val + '%'
|
}
|
})
|
pre[key] = val
|
return pre
|
}, {})
|
pre.push(item)
|
return pre
|
}, [])
|
},
|
/* showHeight() {
|
let { list, height, pageInfo } = this
|
const { pageSize = 10 } = pageInfo
|
if (list.length >= pageSize) {
|
// return height
|
return '536px'
|
}
|
return 'auto'
|
}, */
|
showWidth() {
|
const { header, defaultWidth, isAutoIndex, indexItemWidth } = this
|
let totalWidth = header.reduce((pre, { width = defaultWidth }) => {
|
const matchNum = width.match(/^\d+/)
|
const realWidth = Array.isArray(matchNum) ? parseInt(matchNum[0]) : 0
|
pre = pre + realWidth
|
return pre
|
}, 0)
|
if (totalWidth === 0) {
|
return '100%'
|
}
|
if (isAutoIndex) {
|
totalWidth = totalWidth + indexItemWidth
|
}
|
return totalWidth > 1200 ? '100%' : `${totalWidth + 1}px`
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.list-table {
|
& >>> .el-table th {
|
background: #f5f5f5;
|
color: #222222;
|
padding: 0;
|
border-color: #ebeef5;
|
}
|
& >>> .el-table tr {
|
height: 48px;
|
line-height: 48px;
|
}
|
& >>> .el-table tr th {
|
line-height: 44px;
|
}
|
& >>> .el-table .select-row td {
|
color: #222;
|
background-color: #e7f4fe;
|
}
|
& >>> .el-table td {
|
color: #666666;
|
border-color: #eee;
|
padding: 0;
|
height: 48px;
|
& .cell {
|
line-height: 18px;
|
}
|
}
|
& a {
|
color: #0081f0;
|
cursor: pointer;
|
}
|
& >>> .item-inner p {
|
padding: 0;
|
margin: 0;
|
&.showTooltip {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
& >>> .item-inner p .el-button + .el-button {
|
padding-left: 10px;
|
}
|
& >>> .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;
|
padding-left: 20px;
|
& >>> .el-icon--right {
|
margin: 0;
|
}
|
}
|
& .button-select-disabled {
|
color: #c5c5c5;
|
padding-left: 20px;
|
/* padding-right: 2em; */
|
}
|
& p.buttons-wraper {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding-right: 10px;
|
}
|
}
|
.padding-right {
|
padding-right: 40px;
|
}
|
</style>
|
