<template>
|
<div class="common-table-box">
|
<el-table
|
:data="tableLsit"
|
size="mini"
|
border
|
@selection-change="handleSelectionChange"
|
>
|
<template v-for="(item, index) in columnList">
|
<!-- 多选 -->
|
<el-table-column
|
:key="index + 1"
|
v-if="item.type === 'select'"
|
align="center"
|
type="selection"
|
width="50"
|
>
|
</el-table-column>
|
<!-- 展开行 -->
|
<el-table-column
|
:key="index + 1"
|
v-if="item.type === 'expand'"
|
align="center"
|
type="expand"
|
width="50"
|
label="更多"
|
>
|
<template slot-scope="propsChild">
|
<el-form label-position="left" inline class="demo-table-expand">
|
<el-form-item
|
v-for="(ic, xc) in item.child"
|
:key="xc"
|
:label="ic.label"
|
>
|
<span>{{ propsChild.row[ic.key] }}</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
</el-table-column>
|
<!-- 序号 -->
|
<el-table-column
|
:key="index + 1"
|
v-if="item.type === 'index'"
|
align="center"
|
type="index"
|
width="70"
|
label="序号"
|
></el-table-column>
|
<!-- 图片 -->
|
<el-table-column
|
:key="index + 1"
|
v-if="item.type === 'img'"
|
align="center"
|
:label="item.label"
|
>
|
<template slot-scope="scope">
|
<div class="fl-cen">
|
<el-image
|
class="img-show-style"
|
fit="cover"
|
:style="[
|
{
|
width: item.width ? item.width + 'px' : 30 + 'px',
|
height: item.height ? item.height + 'px' : 30 + 'px',
|
},
|
]"
|
:src="scope.row[item.key]"
|
:preview-src-list="[scope.row[item.key]]"
|
>
|
</el-image>
|
</div>
|
</template>
|
</el-table-column>
|
<!-- 常规表格 -->
|
<el-table-column
|
:key="index + 1"
|
v-if="item.type === 'common' || !item.type"
|
:prop="item.key"
|
:sortable="item.sort ? item.sort : false"
|
align="center"
|
:show-overflow-tooltip="item.overflow === false ? false : true"
|
:label="item.label"
|
:width="item.width"
|
>
|
<template slot-scope="scope">
|
<span key="index+1" v-if="item.timeShow === 'year'">{{
|
reYear(scope.row[item.key])
|
}}</span>
|
<span v-else-if="item.timeShow === 'month'">{{
|
reMonth(scope.row[item.key])
|
}}</span>
|
<span v-else-if="item.timeShow === 'day'">{{
|
reSecond(scope.row[item.key])
|
}}</span>
|
<span v-else>{{ scope.row[item.key] || "-" }}</span>
|
</template>
|
</el-table-column>
|
<!-- 自定义插槽 -->
|
<el-table-column
|
:key="index + 1"
|
v-if="item.type === 'custom'"
|
align="center"
|
:label="item.label"
|
:width="item.width"
|
:prop="item.key"
|
:sortable="item.sort ? item.sort : false"
|
:show-overflow-tooltip="item.overflow === false ? false : true"
|
:fixed="item.fixed ? item.fixed : false"
|
>
|
<template slot-scope="scope">
|
<slot :row="scope.row" :name="item.slot"></slot>
|
</template>
|
</el-table-column>
|
</template>
|
</el-table>
|
<slot></slot>
|
</div>
|
</template>
|
|
<script>
|
import { dateTime, dateMonth, dateYear } from "@/utils/common";
|
export default {
|
props: {
|
tableLsit: {
|
type: Array,
|
default: [],
|
}, // 列表
|
columnList: {
|
type: Array,
|
default: [],
|
}, // column属性列表
|
},
|
methods: {
|
// 多选事件
|
handleSelectionChange(arr) {
|
this.$emit("selectionHandle", arr);
|
},
|
// 时间转换年
|
reYear(t) {
|
return dateYear(t);
|
},
|
// 时间转换年月日
|
reSecond(t) {
|
return dateTime(t);
|
},
|
// 时间转换年月
|
reMonth(t) {
|
return dateMonth(t);
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
form {
|
display: flex;
|
flex-direction: column;
|
}
|
.img-show-style {
|
cursor: pointer;
|
}
|
</style>
|
<style>
|
.demo-table-expand {
|
font-size: 0;
|
}
|
.demo-table-expand label {
|
width: 90px;
|
color: #99a9bf;
|
}
|
.demo-table-expand .el-form-item {
|
margin-right: 0;
|
margin-bottom: 0;
|
width: 50%;
|
}
|
</style>
|
