<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=" "
|
class-name="autoIndex"
|
: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,
|
maxContrl:
|
scope.row[item.prop] && scope.row[item.prop].length > 30
|
}"
|
:title="
|
scope.row[item.prop] &&
|
scope.row[item.prop].length > 10 &&
|
scope.row[item.prop]
|
"
|
>
|
{{ 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="stylus">
|
.table_btn_popover {
|
min-width: 100px;
|
padding: 0px 10px;
|
& .more-buttons {
|
display: flex;
|
justify-content: space-around;
|
height: 48px;
|
line-height: 48px;
|
}
|
& .more-buttons button{
|
color:#0081F0;
|
font-size:14px;
|
}
|
}
|
.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 {
|
height: 48px;
|
& .changeCol {
|
color: #f56c6c;
|
}
|
}
|
}
|
& .autoIndex {
|
& .cell {
|
& div {
|
line-height: 48px;
|
height: 48px;
|
}
|
}
|
}
|
& .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;
|
height: 48px;
|
line-height: 48px;
|
}
|
& .item-inner .maxContrl {
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
line-height: 20px;
|
height: auto;
|
}
|
& .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;
|
}
|
}
|
& .buttons-wraper {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding-right: 0px;
|
& .two-but {
|
margin-left: 20px;
|
}
|
}
|
& .buttons-wraper button {
|
color:#0081F0;
|
font-size:14px;
|
}
|
}
|
</style>
|
