|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="containerTable">
|
|
<div class="containerTable">
|
|
|
<div class="table_box">
|
|
<div class="table_box">
|
|
|
- <div class="table-title-btn">
|
|
|
|
|
|
|
+ <div class="table-title-btn" v-if="$slots['table-title-btn']">
|
|
|
<slot name="table-title-btn"></slot>
|
|
<slot name="table-title-btn"></slot>
|
|
|
</div>
|
|
</div>
|
|
|
<el-table ref="multipleTableRef" :row-key="rowKey"
|
|
<el-table ref="multipleTableRef" :row-key="rowKey"
|
|
|
:header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }"
|
|
:header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }"
|
|
|
:data="props.tableData" :height="tableHeight" :max-height="maxHeight" table-layout="fixed" style="width: 100%;"
|
|
:data="props.tableData" :height="tableHeight" :max-height="maxHeight" table-layout="fixed" style="width: 100%;"
|
|
|
- @selection-change="selectionChange" @select-all="selectAllChange" @cell-mouse-enter="handleMouseEnter"
|
|
|
|
|
|
|
+ @selection-change="selectionChange" @select-all="selectAllChange" @cell-mouse-enter="handleMouseEnter"
|
|
|
@cell-mouse-leave="handleMouseLeave" :highlight-current-row="highlightCurrentRow"
|
|
@cell-mouse-leave="handleMouseLeave" :highlight-current-row="highlightCurrentRow"
|
|
|
@current-change="currentChange" v-loading="loading" :show-summary='props.showSummary' border>
|
|
@current-change="currentChange" v-loading="loading" :show-summary='props.showSummary' border>
|
|
|
<!-- 空内容自定义 -->
|
|
<!-- 空内容自定义 -->
|
|
@@ -23,8 +23,7 @@
|
|
|
<div>
|
|
<div>
|
|
|
<el-table :data="props.row.children">
|
|
<el-table :data="props.row.children">
|
|
|
<el-table-column v-for="column in secondaryColumns" :key="column.prop" :prop="column.prop"
|
|
<el-table-column v-for="column in secondaryColumns" :key="column.prop" :prop="column.prop"
|
|
|
- :label="column.label" :sortable="column.sortable ?'custom' : false" :width="column.width"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ :label="column.label" :sortable="column.sortable ? 'custom' : false" :width="column.width">
|
|
|
<template #header>
|
|
<template #header>
|
|
|
<slot name="search" :slotData="column"></slot>
|
|
<slot name="search" :slotData="column"></slot>
|
|
|
</template>
|
|
</template>
|
|
@@ -55,16 +54,16 @@
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
<el-table-column v-if="showIndex" type="index" label="序号" width="55" />
|
|
<el-table-column v-if="showIndex" type="index" label="序号" width="55" />
|
|
|
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
|
|
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
|
|
|
- :sortable="column.sortable ?'custom' : false" :width="column.width" :filters="column.filters"
|
|
|
|
|
- :filter-method="column.filters?(value, row) => row[column.prop] === value:undefined"
|
|
|
|
|
- :filtered-value="column.filteredValue?column.filteredValue:undefined"
|
|
|
|
|
- :align="column.align ? column.align : 'center'" show-overflow-tooltip >
|
|
|
|
|
|
|
+ :sortable="column.sortable ? 'custom' : false" :width="column.width" :filters="column.filters"
|
|
|
|
|
+ :filter-method="column.filters ? (value, row) => row[column.prop] === value : undefined"
|
|
|
|
|
+ :filtered-value="column.filteredValue ? column.filteredValue : undefined"
|
|
|
|
|
+ :align="column.align ? column.align : 'center'" show-overflow-tooltip>
|
|
|
<template #header>
|
|
<template #header>
|
|
|
<slot name="search" :slotData="column"></slot>
|
|
<slot name="search" :slotData="column"></slot>
|
|
|
</template>
|
|
</template>
|
|
|
<template #default="scope" v-if="column.component === 'customSlot'">
|
|
<template #default="scope" v-if="column.component === 'customSlot'">
|
|
|
- <slot name="customSlot" :data="scope.row" :bodyCell="{ scope, column }"></slot>
|
|
|
|
|
- <slot :name="column.prop" :data="scope.row" :bodyCell="{ scope, column }"></slot>
|
|
|
|
|
|
|
+ <slot name="customSlot" :data="scope.row" :bodyCell="{ scope, column }"></slot>
|
|
|
|
|
+ <slot :name="column.prop" :data="scope.row" :bodyCell="{ scope, column }"></slot>
|
|
|
</template>
|
|
</template>
|
|
|
<template #default="scope" v-else>
|
|
<template #default="scope" v-else>
|
|
|
<RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
|
|
<RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
|
|
@@ -84,7 +83,7 @@
|
|
|
v-if="typeof getDisplayText(scope.row, column) === 'string' && getDisplayText(scope.row, column).includes('\n')"
|
|
v-if="typeof getDisplayText(scope.row, column) === 'string' && getDisplayText(scope.row, column).includes('\n')"
|
|
|
class="flex f-c ">
|
|
class="flex f-c ">
|
|
|
<span v-for="(line, index) in getDisplayText(scope.row, column).split('\n')" :key="index">{{ line
|
|
<span v-for="(line, index) in getDisplayText(scope.row, column).split('\n')" :key="index">{{ line
|
|
|
- }}</span>
|
|
|
|
|
|
|
+ }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<span v-else>
|
|
<span v-else>
|
|
|
{{ getDisplayText(scope.row, column) }}
|
|
{{ getDisplayText(scope.row, column) }}
|
|
@@ -116,15 +115,15 @@ import type { TableInstance } from "element-plus";
|
|
|
interface TableRow {
|
|
interface TableRow {
|
|
|
[key: string]: any;
|
|
[key: string]: any;
|
|
|
}
|
|
}
|
|
|
-const emit = defineEmits(['getList', 'selectAllChange', 'selectionChange', 'currentChange','handleMouseEnter','handleMouseLeave']);
|
|
|
|
|
-interface Props{
|
|
|
|
|
|
|
+const emit = defineEmits(['getList', 'selectAllChange', 'selectionChange', 'currentChange', 'handleMouseEnter', 'handleMouseLeave']);
|
|
|
|
|
+interface Props {
|
|
|
tableData: Array<TableRow>;
|
|
tableData: Array<TableRow>;
|
|
|
columnwidth: number,//操作栏宽度
|
|
columnwidth: number,//操作栏宽度
|
|
|
secondaryTable?: boolean,//是否展示二级表格
|
|
secondaryTable?: boolean,//是否展示二级表格
|
|
|
highlightCurrentRow?: boolean,//是否可点击
|
|
highlightCurrentRow?: boolean,//是否可点击
|
|
|
showOperation?: boolean,//操作显示/隐藏
|
|
showOperation?: boolean,//操作显示/隐藏
|
|
|
- loading?:boolean,
|
|
|
|
|
- showSummary?:boolean, //合计
|
|
|
|
|
|
|
+ loading?: boolean,
|
|
|
|
|
+ showSummary?: boolean, //合计
|
|
|
columns: {
|
|
columns: {
|
|
|
prop: string;
|
|
prop: string;
|
|
|
label: string;
|
|
label: string;
|
|
@@ -167,14 +166,14 @@ interface RouterLink {
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
showOperation: true, // 默认值为 true
|
|
showOperation: true, // 默认值为 true
|
|
|
});
|
|
});
|
|
|
-const loading=ref(false)
|
|
|
|
|
|
|
+const loading = ref(false)
|
|
|
const tableHeight = ref(props.tableheight); // 初始化表格高度
|
|
const tableHeight = ref(props.tableheight); // 初始化表格高度
|
|
|
const newSelectionList = ref<string[]>([]);
|
|
const newSelectionList = ref<string[]>([]);
|
|
|
const multipleTableRef = ref<TableInstance>();
|
|
const multipleTableRef = ref<TableInstance>();
|
|
|
const TableData = ref<TableRow[]>();
|
|
const TableData = ref<TableRow[]>();
|
|
|
watch(props, () => {
|
|
watch(props, () => {
|
|
|
- if(props.loading!=undefined){
|
|
|
|
|
- loading.value=props.loading;
|
|
|
|
|
|
|
+ if (props.loading != undefined) {
|
|
|
|
|
+ loading.value = props.loading;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
@@ -186,7 +185,7 @@ onMounted(() => {
|
|
|
counter: counter++
|
|
counter: counter++
|
|
|
|
|
|
|
|
}));
|
|
}));
|
|
|
- if(!props.tableheight) handleResize();
|
|
|
|
|
|
|
+ if (!props.tableheight) handleResize();
|
|
|
});
|
|
});
|
|
|
function handleResize() {
|
|
function handleResize() {
|
|
|
// 获取当前窗口的高度
|
|
// 获取当前窗口的高度
|
|
@@ -226,14 +225,14 @@ const selectAllChange = (value: any[]) => {
|
|
|
* //单元格移入事件
|
|
* //单元格移入事件
|
|
|
* @param row 行数据
|
|
* @param row 行数据
|
|
|
*/
|
|
*/
|
|
|
-const handleMouseEnter=(row:any)=>{
|
|
|
|
|
|
|
+const handleMouseEnter = (row: any) => {
|
|
|
emit('handleMouseEnter', row)
|
|
emit('handleMouseEnter', row)
|
|
|
}
|
|
}
|
|
|
/**
|
|
/**
|
|
|
* //单元格移出事件
|
|
* //单元格移出事件
|
|
|
* @param row 行数据
|
|
* @param row 行数据
|
|
|
*/
|
|
*/
|
|
|
- const handleMouseLeave=(row:any)=>{
|
|
|
|
|
|
|
+const handleMouseLeave = (row: any) => {
|
|
|
emit('handleMouseLeave', row)
|
|
emit('handleMouseLeave', row)
|
|
|
}
|
|
}
|
|
|
//行点击事件
|
|
//行点击事件
|
|
@@ -285,7 +284,7 @@ function htmlEvent(row: Row, column: any) {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
-.el-table .el-table__cell .routerlick > a {
|
|
|
|
|
|
|
+.el-table .el-table__cell .routerlick>a {
|
|
|
color: red;
|
|
color: red;
|
|
|
}
|
|
}
|
|
|
|
|
|
祁鹏飞