<template>
|
<div>
|
<el-table
|
ref="multipleTable"
|
v-loading="loading"
|
class="customTable"
|
:data="tableData"
|
border
|
:stripe="false"
|
fit
|
highlight-current-row
|
|
element-loading-text="拼命加载中"
|
element-loading-background="rgba(0, 0, 0, 0.3)"
|
@selection-change="handleSelectionChange"
|
>
|
<!-- 是否需要全选， isshow控制-->
|
<el-table-column v-if="checkbox" type="selection" align="center" fixed></el-table-column>
|
<!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值),
|
oper: 是否有操作列, oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 -->
|
<el-table-column
|
type="index"
|
label="序号"
|
width="50px"
|
>
|
</el-table-column>
|
<el-table-column
|
v-for="(th, key) in tableHeader"
|
:key="key"
|
:prop="th.prop"
|
:label="th.label"
|
:fixed="th.fixed"
|
:width="th.width"
|
:min-width="th.minWidth"
|
align="left"
|
>
|
<!-- 加入template主要是有操作一栏， 操作一栏的内容是相同的， 数据不是动态获取的，这里操作一栏的名字定死（oper表示是操作这一列，否则就不是） -->
|
<template slot-scope="scope">
|
<!-- <div v-if="th.prop === 'custom'"> -->
|
<!-- <el-button
|
v-for="(o, key2) in th.oper"
|
:key="key2"
|
:type="o.style"
|
:icon="o.icon"
|
size="mini"
|
@click="o.clickFun(scope.row)"
|
>
|
{{ o.name }}
|
</el-button> -->
|
<!-- </div> -->
|
<slot v-if="th.slot" :name="th.slot" :scope="scope.row"></slot>
|
<span>{{ scope.row[th.prop] }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div v-if="paginationDataSource && paginationDataSource.records && paginationDataSource.records.length" class="page">
|
<el-pagination
|
:current-page="paginationDataSource.current"
|
:page-size="paginationDataSource.size"
|
:page-sizes="[5, 10, 20, 50, 100]"
|
background
|
layout="total,prev,pager,next,sizes,jumper"
|
:total="paginationDataSource.total"
|
@size-change="onPageSizeChange"
|
@current-change="onPaginationChange"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'Index',
|
// 传入的数据
|
props: {
|
/** 未分页数据 */
|
dataSource: { // 表格数据
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
/** 带分页控件的数据 */
|
paginationDataSource: {
|
default: {
|
records: []
|
}
|
},
|
tableHeader: { // 表格头部
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
tabheight: {
|
type: String,
|
default: '100%'
|
},
|
loading: { // 加载等待
|
type: Boolean,
|
default: false
|
},
|
checkbox: {
|
type: Boolean,
|
default: false
|
}
|
},
|
computed: {
|
tableData () {
|
if (this.paginationDataSource.records) {
|
return this.paginationDataSource.records || [];
|
}
|
return this.dataSource;
|
}
|
},
|
watch: {
|
tableData (val) {
|
console.log(val)
|
}
|
},
|
methods: {
|
// 获取选择行数信息
|
getmydata() {
|
const data = this.$refs.multipleTable.selection
|
const IDS = []
|
for (let i = 0; i < data.length; i++) {
|
IDS.push(data[i].ID)
|
}
|
this.$emit('func', IDS)
|
},
|
handleSelectionChange (list) {
|
this.$emit('onSelectionChange', list);
|
},
|
onPageSizeChange (pageSize) {
|
this.$emit('onPageSizeChange', pageSize)
|
},
|
onPaginationChange (page) {
|
this.$emit('onPaginationChange', page);
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" >
|
/*@import '../../styles/table.less';*/
|
.title {
|
font-size: 20px;
|
height: 40px;
|
line-height: 40px;
|
color: #333;
|
font-weight: 600;
|
}
|
.brand {
|
color: #409EFF;
|
}
|
.custom-box {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
min-height: 100%;
|
background-color: #fff;
|
border-radius: 5px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
padding: 5px;
|
z-index: 25;
|
overflow: auto;
|
.addBtn {
|
padding-bottom: 10px;
|
}
|
}
|
.tableBox {
|
// width: 100%;
|
// height: calc(100vh - 178px);
|
// overflow: hidden
|
}
|
/deep/.el-range-editor--small.el-input__inner {
|
// height: 40px;
|
}
|
/deep/.el-table {
|
th {
|
padding: 0 !important;
|
height: 50px !important;
|
text-align: center;
|
background-color: rgba(231, 231, 231, 0.2) !important;
|
color: #222;
|
}
|
td{
|
padding: 0 !important;
|
max-height: 70px !important;
|
height: 70px;
|
text-align: center;
|
}
|
}
|
/deep/.el-table td.el-table__cell div {
|
// text-overflow: -o-ellipsis-lastline;
|
// overflow: hidden;
|
// text-overflow: ellipsis;
|
// display: -webkit-box;
|
// -webkit-line-clamp: 2;
|
// line-clamp: 2;
|
// -webkit-box-orient: vertical;
|
}
|
/deep/.el-table--scrollable-y {
|
.el-table__body-wrapper {
|
overflow-y: hidden !important;
|
}
|
}
|
/deep/.el-table__fixed-right {
|
right: 0 !important;
|
}
|
.page {
|
text-align: center;
|
padding: 20px 0;
|
}
|
</style>
|
