376 lines
9.7 KiB
Vue
376 lines
9.7 KiB
Vue
<template>
|
||
<div style="width: 100%;height:100%">
|
||
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
|
||
<el-table
|
||
ref="multipleTableRef"
|
||
:data="tableData"
|
||
:class="customClass"
|
||
:cell-class-name="setClass"
|
||
:row-class-name="rowClassName"
|
||
@selection-change="handleSelectionChange"
|
||
@current-change="handleCurrentChange"
|
||
@row-click="singleElection"
|
||
@row-dblclick="rowdbClickHland"
|
||
:reserve-selection="true"
|
||
@row-contextmenu="rowcontextmenuHland"
|
||
@mouseover.native="clearnScroll"
|
||
@mouseleave.native="createScroll"
|
||
:row-key="getConfiger.rowKey"
|
||
:border="getConfiger.border"
|
||
:default-expand-all="getConfiger.defaultExpandAll"
|
||
:stripe="getConfiger.stripe"
|
||
:height="tableHeight"
|
||
v-loading="tableConfiger.loading"
|
||
:lazy="getConfiger.lazy"
|
||
:load="load"
|
||
v-el-table-infinite-scroll="loadTable"
|
||
:tree-props="treePros"
|
||
style="width: 100%; font-size: 16px"
|
||
:header-cell-class-name="() => 'myTableHeadBgColorDark'"
|
||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||
:row-style="{
|
||
height:
|
||
getConfiger.rowHeight === 'auto'
|
||
? getConfiger.rowHeight
|
||
: getConfiger.rowHeight + 'px'
|
||
}"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
width="55"
|
||
v-if="getConfiger.showSelectType === 'checkBox'"
|
||
:reserve-selection="true"
|
||
/>
|
||
<el-table-column
|
||
width="55"
|
||
v-else-if="getConfiger.showSelectType === 'radio'"
|
||
#default="{ row }"
|
||
>
|
||
<el-radio
|
||
class="radio"
|
||
v-model="radioChoose"
|
||
:label="row[getConfiger.rowKey]"
|
||
> </el-radio
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
type="index"
|
||
label="序号"
|
||
v-if="getConfiger.showIndex"
|
||
width="60"
|
||
:align="getConfiger?.align"
|
||
/>
|
||
<el-table-column
|
||
v-for="(item, index) in tableColumn"
|
||
:align="getConfiger?.align"
|
||
:prop="item.prop"
|
||
:key="index"
|
||
:label="item.label"
|
||
:width="item.width"
|
||
:show-overflow-tooltip="item.showOverflowTooltip || false"
|
||
:sortable="item.sortable || false"
|
||
>
|
||
<!-- 使用自定义表头 -->
|
||
<template v-if="item.showSoltHeader" #header="column">
|
||
<span class="header-icon">
|
||
<slot :name="item.prop + 'head'" v-bind="column"></slot>
|
||
</span>
|
||
</template>
|
||
|
||
<!-- 使用自定义 -->
|
||
<template v-if="item.showSolt" #default="scope">
|
||
<slot :name="item.prop" v-bind="scope"></slot>
|
||
</template>
|
||
<!-- 默认 -->
|
||
<template v-else #default="{ row }">
|
||
{{ row[item.prop] }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 操作 -->
|
||
<el-table-column
|
||
v-if="getConfiger.haveControls"
|
||
:fixed="fixed"
|
||
:label="getConfiger.controls"
|
||
:width="controlsWidth"
|
||
:align="getConfiger?.align"
|
||
>
|
||
<template #default="scope">
|
||
<slot name="controls" v-bind="scope"></slot>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
nextTick,
|
||
onMounted,
|
||
onUnmounted,
|
||
reactive,
|
||
ref,
|
||
watch,
|
||
watchEffect
|
||
} from "vue";
|
||
const props = defineProps({
|
||
tableConfiger: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
tableData: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
tableColumn: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
}
|
||
},
|
||
controlsWidth: {
|
||
type: Number,
|
||
default: 180
|
||
},
|
||
tableHeight: {
|
||
type: Number
|
||
},
|
||
isScroll: {
|
||
type: Number,
|
||
default: false
|
||
},
|
||
customClass: {
|
||
type: String
|
||
},
|
||
setClass: {
|
||
type: String
|
||
},
|
||
setRowClass: {
|
||
type: Boolean
|
||
},
|
||
treePros: {
|
||
type: Object,
|
||
default: {
|
||
children: "children",
|
||
hasChildren: "hasChildren"
|
||
}
|
||
},
|
||
fixed: {
|
||
type: String,
|
||
default: "right"
|
||
},
|
||
tabelModel:{
|
||
type: String,
|
||
default: "table"
|
||
}
|
||
});
|
||
// 可选的时候选择的数据
|
||
const emit = defineEmits([
|
||
"chooseData",
|
||
"rowdbClickHland",
|
||
"rowcontextmenuHland"
|
||
]);
|
||
const multipleTableRef = ref();
|
||
const currentRow = ref();
|
||
let getConfiger = reactive({
|
||
showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
|
||
showIndex: true, // 是否显示索引
|
||
rowKey: "id", // 如果是树形表格必须设置rowKey
|
||
border: true, // 是否显示边框
|
||
defaultExpandAll: false, // 是否展开全部
|
||
loading: false,
|
||
align: "center", // 列的对齐方式 left / center / right
|
||
haveControls: true, // 是否有操作列
|
||
controls: "操作", // 操作列的表头
|
||
stripe: false, // 是否有斑马线
|
||
lazy: true, // 树形表格的懒加载必须在tableDatez中给有children的项设置 hasChildren: true,才会显示展开icon
|
||
portUrl: "", // 当树形表格使用懒加载的时候传入的请求路径/接口用于懒加载数据
|
||
defaultSelectKeys: [], // 默认选中的key集合
|
||
radioChoose: "", // 单选时选中的值------------------------------------------- 待完成
|
||
rowHeight: "41", // 每行的高度
|
||
//用作指定行自定义行样式
|
||
rowClassProp: "", //行匹配字段名称
|
||
rowClassLinght: "" //行匹配数据
|
||
});
|
||
const radioChoose = ref("");
|
||
|
||
watchEffect(() => {
|
||
getConfiger = { ...getConfiger, ...props.tableConfiger };
|
||
setDefaultChoose();
|
||
});
|
||
|
||
onMounted(() => {
|
||
setDefaultChoose();
|
||
createScroll(); //是否滚动
|
||
});
|
||
const rowClassName = ({ row, rowIndex }) => {
|
||
if (props.setRowClass) {
|
||
return row.setRowClass || "";
|
||
} else {
|
||
if (row[getConfiger.rowClassProp] == getConfiger.rowClassLinght) {
|
||
return "table_light_row";
|
||
}
|
||
if (rowIndex % 2 == 0) {
|
||
return "";
|
||
} else {
|
||
return "table_blue_row";
|
||
}
|
||
}
|
||
};
|
||
// 可选的时候选择的数据
|
||
const handleSelectionChange = (val) => {
|
||
emit("chooseData", val);
|
||
};
|
||
// 单选的时候选择的数据
|
||
const handleCurrentChange = (val) => {
|
||
currentRow.value = val;
|
||
emit("chooseData", val);
|
||
};
|
||
const singleElection = (val) => {
|
||
if (getConfiger.showSelectType === "radio") {
|
||
radioChoose.value = val[getConfiger.rowKey];
|
||
emit("chooseData", val);
|
||
}
|
||
};
|
||
// 懒加载数据的方法
|
||
const load = (date, treeNode, resolve) => {
|
||
setTimeout(() => {
|
||
resolve([
|
||
{
|
||
id: 31,
|
||
date: "2016-05-01",
|
||
name: "wangxiaohu",
|
||
address: "No. 189, Grove St, Los Angeles"
|
||
},
|
||
{
|
||
id: 32,
|
||
date: "2016-05-01",
|
||
name: "wangxiaohu",
|
||
address: "No. 189, Grove St, Los Angeles"
|
||
}
|
||
]);
|
||
}, 1000);
|
||
};
|
||
// 设置默认选中（在调用的父页面要确保 tableData传出来了如果延迟传过来默认选中不会生效）
|
||
function setDefaultChoose() {
|
||
nextTick(() => {
|
||
// 多选的默认选中
|
||
if (
|
||
getConfiger.defaultSelectKeys?.length > 0 &&
|
||
getConfiger.showSelectType === "checkBox"
|
||
) {
|
||
props.tableData.forEach((item) => {
|
||
if (
|
||
getConfiger.defaultSelectKeys.findIndex(
|
||
(v) => v === item[getConfiger.rowKey]
|
||
) > -1
|
||
) {
|
||
if (multipleTableRef.value)
|
||
multipleTableRef.value.toggleRowSelection(item, true);
|
||
}
|
||
});
|
||
// 单选的默认选中
|
||
} else if (
|
||
getConfiger.defaultSelectKeys &&
|
||
getConfiger.defaultSelectKeys?.length > 0 &&
|
||
getConfiger.showSelectType === "radio"
|
||
) {
|
||
radioChoose.value = getConfiger.defaultSelectKeys[0];
|
||
}
|
||
});
|
||
}
|
||
//当某一行被双击时会触发该事件
|
||
const rowdbClickHland = (row) => {
|
||
emit("rowdbClickHland", row);
|
||
};
|
||
//当某一行右键点击时会触发该事件
|
||
const rowcontextmenuHland = (row, column, e) => {
|
||
e.preventDefault();
|
||
emit("rowcontextmenuHland", { row, e });
|
||
};
|
||
|
||
const timer = ref(null);
|
||
// 鼠标进入
|
||
const clearnScroll = () => {
|
||
clearInterval(timer.value);
|
||
timer.value = null;
|
||
};
|
||
// 鼠标离开
|
||
const createScroll = () => {
|
||
clearnScroll();
|
||
// 拿到table
|
||
const tabel = multipleTableRef.value.layout.table.refs;
|
||
// 拿到可以滚动的元素
|
||
const tableWrapper = tabel.bodyWrapper.firstElementChild.firstElementChild;
|
||
if (props.isScroll) {
|
||
timer.value = setInterval(() => {
|
||
tableWrapper.scrollTop += 1;
|
||
//判断滚动到底部,设置为0(可视高度+距离顶部 = 整个高度)
|
||
if ( tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
|
||
tableWrapper.scrollTop = 0;
|
||
}
|
||
}, 100);
|
||
}
|
||
};
|
||
|
||
// 触底加载
|
||
const loadTable = () => {
|
||
emit("changePage",props.tabelModel);
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
clearnScroll();
|
||
});
|
||
</script>
|
||
|
||
<style lang = "scss">
|
||
.myTableHeadBgColorDark {
|
||
background-color: rgba(18, 97, 192, 0.3) !important;
|
||
color: #008efc;
|
||
}
|
||
</style>
|
||
<style lang = "scss" scoped>
|
||
::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
|
||
font-size: 14px;
|
||
}
|
||
::v-deep .el-table {
|
||
background-color: transparent;
|
||
--el-table-border-color: transparent;
|
||
--el-table-row-hover-bg-color: #008ffd4b;
|
||
}
|
||
|
||
::v-deep .el-table th.el-table__cell {
|
||
color: #1f84ff;
|
||
border-bottom: none;
|
||
}
|
||
::v-deep .el-table tr {
|
||
background-color: transparent;
|
||
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-table td.el-table__cell {
|
||
background: transparent;
|
||
}
|
||
::v-deep .el-table .table_blue_row {
|
||
background: #072343;
|
||
}
|
||
::v-deep .el-table .table_light_row {
|
||
background: #6b933d;
|
||
}
|
||
::v-deep .el-table .cell {
|
||
padding: 0;
|
||
line-height: unset;
|
||
}
|
||
::v-deep .el-table__body tr.current-row > td.el-table__cell {
|
||
background: #002961;
|
||
}
|
||
::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right {
|
||
background: #fff !important;
|
||
}
|
||
::v-deep .el-loading-mask {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
}
|
||
.header-icon {
|
||
white-space: nowrap;
|
||
}
|
||
</style> |