Effect:
<!-- 表格组件 -->
<template>
<div class="DbRecordTable">
<el-table
stripe
ref="multipleTable"
:cell-style="{ padding: '7px 0' }"
border
:data.sync="propdata.data"
:row-key="rowKeys"
:header-row-style="{ height: '66px' }"
@row-click="singleClickChange"
@selection-change="handleSelectionChange"
:header-cell-style="{ 'text-align': 'center' }"
highlight-current-row
@select="onTableSelect"
@sort-change="sortChange"
@select-all="selectAll"
:header-cell-class-name="handleHeaderCellClass"
:key="isKey"
>
<el-table-column
v-if="propdata.isIndex"
label="序号"
align="center"
type="index"
width="80"
>
</el-table-column>
<!-- 多选 -->
<el-table-column
v-if="propdata.isCheck"
type="selection"
width="55"
align="center"
:reserve-selection="true"
:selectable="checkSelect"
></el-table-column>
<el-table-column
:prop="item.prop"
v-for="(item, index) in propdata.config"
:label="item.label"
:width="item.width"
:key="index"
:sortable="item.sortable"
:align="item.align"
show-overflow-tooltip
>
<template slot-scope="scope">
<i
:class="
item.isView(scope.row) === true
? 'el-icon-view'
: 'el-icon-search'
"
v-if="item.isIcon"
style="color: #36a0f6; margin-right: 3px"
></i>
<!-- string类型展示 -->
<span>
<el-tooltip
v-if="item.emit"
class="item"
effect="dark"
:content="item.content"
:disabled="item.disabled"
placement="top"
>
<span
@click="operateFun(item.emit, scope.row)"
style="color: #36a0f6"
>
{
{
scope.row[item.prop] }}
</span>
</el-tooltip>
<span
v-else-if="item.click"
@click="operateFun(item.click, scope.row)"
style="color: #36a0f6"
>
{
{
scope.row[item.prop] }}
</span>
<span v-else>
{
{
scope.row[item.prop] }}
</span>
</span>
<!-- 操作按钮 -->
<span v-if="item.type == 'button'">
<template v-for="(buttonItems, btnInd) in item.child">
<el-button
:type="buttonItems.type"
size="mini"
v-if="buttonItems.isScope(scope.row)"
:class="
buttonItems.isShow(scope.row) === true
? 'textBackGround'
: 'disableTextBackGround'
"
:disabled="!buttonItems.isShow(scope.row)"
@click="operateFun(buttonItems.emit, scope.row)"
:key="btnInd + '1'"
>
<span> {
{
buttonItems.name }}</span>
</el-button>
</template>
<!-- 图片按钮 -->
<template v-for="(imgs, imgsIndex) in item.img">
<img
:key="imgsIndex"
:src="scope.row.status !== '3' ? imgs.src : imgs.disabledSrc"
alt=""
:class="scope.row.status === '3' ? 'noClick' : ''"
class="disabledImg"
@click="operateFun(imgs.emit, scope.row)"
/>
</template>
</span>
</template>
</el-table-column>
</el-table>
<div class="pagination" v-if="propdata.isPaginationShow">
<span v-if="search" class="totalItem"
>共搜索 {
{
search }} 次，浏览 {
{
browse }} 次</span
>
<span v-if="marks" class="totalItem">共收藏档案 {
{
marks }} 份</span>
<el-pagination
@current-change="getdbRecordList"
@size-change="handleSizeChange"
:current-page="propdata.pagination.currentPage"
:page-size="propdata.pagination.currentPageSize"
:page-sizes="propdata.pagination.currentPageArr"
:layout="propdata.pagination.layoutString"
:total="propdata.pagination.total"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "DbRecordTable",
props: {
propdata: {
type: Object
},
height: {
type: String,
default: ""
},
rowKeys: {
type: Function
},
isKey: {
type: String
},
selectableSign: {
type: String
}, // 标识是哪部分的新增(挂失/销毁/借阅/移交/打印)
search: Number,
browse: Number,
marks: Number
},
data() {
return {
multipleSelection: [], // 表格多选框的数据
prevSort: "",
prevProp: "",
orderArray: []
};
},
watch: {
},
methods: {
checkSelect(row) {
let isChecked = true;
if (this.selectableSign === "sign_loss") {
// 挂失新增
if (row.status !== "正常" && row.status !== "借阅中") {
isChecked = false;
} else {
isChecked = true;
}
} else if (this.selectableSign === "sign_destroy") {
//销毁新增
if (row.status === "挂失" || row.status === "借阅中") {
isChecked = false;
} else {
isChecked = true;
}
} else {
// status: 1 是没有封卷，2 是已经封卷, 3 是年度封档
if (
row.status === "2" ||
row.status === "3" ||
row.status === "已失效" ||
row.status === "已解挂"
) {
// 判断里面是否存在某个参数
isChecked = false;
} else {
isChecked = true;
}
}
return isChecked;
},
// 操作按钮
operateFun(emit, row) {
this.$emit("operateFun", emit, row);
},
handleHeaderCellClass({
column }) {
this.orderArray.forEach(element => {
if (column.property === element.prop) {
column.order = element.order;
}
});
},
// 排序操作
sortChange(column, prop, order) {
if (column.order) {
//参与排序
let flagIsHave = false;
this.orderArray.forEach(element => {
if (element.prop === column.prop) {
element.order = column.order;
flagIsHave = true;
}
});
if (!flagIsHave) {
this.orderArray.push({
prop: column.prop,
order: column.order
});
}
} else {
//不参与排序
this.orderArray = this.orderArray.filter(element => {
return element.prop !== prop;
});
}
this.$emit("sortChange", column, prop, order);
},
// 是否选中
onTableSelect(rows, row) {
this.$emit("onTableSelect", rows, row);
// let selected = rows.length && rows.indexOf(row) !== -1;
// console.log(selected); // true就是选中，0或者false是取消选中
},
// 点击分页
getdbRecordList(val) {
this.$emit("getdbRecordList", val);
},
// 每页条数
handleSizeChange(val) {
this.$emit("handleSizeChange", val);
},
// 表格前面多选框
handleSelectionChange(val) {
this.$emit("multipleSelection", val);
// this.multipleSelection = val;
},
// 鼠标单击
singleClickChange(row) {
this.$emit("singleClickChange", row);
},
selectAll(row) {
this.$emit("selectAll", row);
}
},
mounted() {
this.$refs.multipleTable.columns.forEach(item => {
if (item.property == "recordYear" || item.property == "studentYear") {
item.order = "descending";
} else {
item.order = "ascending";
}
});
}
};
</script>
<style>
.el-scrollbar__wrap {
overflow: auto;
}
</style>
<style lang="less" scoped>
/* 修改 滚动条的 下面 的 样式 */
.main::-webkit-scrollbar-track {
background-color: white;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
/* 修改 滑块 */
.main::-webkit-scrollbar-thumb {
background-color: #dcdfe6;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
/deep/ .el-table__body-wrapper {
cursor: pointer;
}
// 点击表格背景
/deep/ .el-table__body tr.current-row > td {
background-color: #e4f1fe !important;
}
/deep/ .el-icon-refresh-right {
font-weight: 600;
}
/deep/ .el-icon-search {
font-weight: 600;
}
/deep/ .cell {
font-size: 16px;
}
/deep/ .el-table {
overflow: auto;
}
.disabledImg {
vertical-align: middle;
margin-left: 10px;
cursor: pointer;
}
.noClick {
pointer-events: none;
}
.DbRecordTable {
height: 100%;
display: flex;
flex-direction: column;
.textBackGround {
color: #36a0f6;
font-weight: 600;
}
.disableTextBackGround {
color: #999;
font-weight: 600;
}
/deep/ .el-button--primary.is-disabled {
background-color: #fff;
border-color: #999;
color: #999;
}
}
.pagination {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.tabFooter {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.totalItem {
color: #606266;
font-size: 13px;
font-weight: 400;
margin-right: 10px;
// position: absolute;
// left: 14%;
}
</style>