|
@@ -67,9 +67,14 @@
|
|
|
</el-tag>
|
|
</el-tag>
|
|
|
<ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)" width="50px"
|
|
<ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)" width="50px"
|
|
|
height="50px"></ImagePreview>
|
|
height="50px"></ImagePreview>
|
|
|
|
|
+ <div v-else-if="column.component === 'customEvent'">
|
|
|
|
|
+ <span v-if="customEvent(scope.row, column).style" :style="customEvent(scope.row, column).style"
|
|
|
|
|
+ @click="customEventClick(scope.row)">{{ customEvent(scope.row, column).content }}</span>
|
|
|
|
|
+ <span v-else>{{ customEvent(scope.row, column) }}</span>
|
|
|
|
|
+ </div>
|
|
|
<div v-else>
|
|
<div v-else>
|
|
|
- <div v-if="getDisplayText(scope.row, column).includes('\n')" class="flex f-c ">
|
|
|
|
|
- <span v-for="(line, index) in getDisplayText(scope.row, column).split('\n')" :key="index">{{ line
|
|
|
|
|
|
|
+ <div v-if="getDisplayText(scope.row, 0).includes('\n')" class="flex f-c ">
|
|
|
|
|
+ <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>
|
|
@@ -87,7 +92,7 @@
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
</el-table>
|
|
</el-table>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="page_box" v-if="props.pageInfo">
|
|
|
|
|
|
|
+ <div class="page_box m-top-10" v-if="props.pageInfo">
|
|
|
<el-pagination v-model:current-page="props.pageInfo.pageNum" v-model:page-size="props.pageInfo.pageSize"
|
|
<el-pagination v-model:current-page="props.pageInfo.pageNum" v-model:page-size="props.pageInfo.pageSize"
|
|
|
:page-sizes="props.pageInfo.sizes" layout="total, sizes, prev, pager, next, jumper"
|
|
:page-sizes="props.pageInfo.sizes" layout="total, sizes, prev, pager, next, jumper"
|
|
|
:total="props.pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
:total="props.pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
@@ -102,7 +107,7 @@ import type { TableInstance } from "element-plus";
|
|
|
interface TableRow {
|
|
interface TableRow {
|
|
|
[key: string]: any;
|
|
[key: string]: any;
|
|
|
}
|
|
}
|
|
|
-const emit = defineEmits(['getList', 'selectAllChange', 'selectionChange']);
|
|
|
|
|
|
|
+const emit = defineEmits(['getList', 'selectAllChange', 'selectionChange', 'customEventClick']);
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
tableData: Array<TableRow>;
|
|
tableData: Array<TableRow>;
|
|
|
columnwidth: number,//操作栏宽度
|
|
columnwidth: number,//操作栏宽度
|
|
@@ -154,19 +159,21 @@ onMounted(() => {
|
|
|
...row,
|
|
...row,
|
|
|
_edit: false, // 设置默认非编辑状态
|
|
_edit: false, // 设置默认非编辑状态
|
|
|
counter: counter++
|
|
counter: counter++
|
|
|
-
|
|
|
|
|
}));
|
|
}));
|
|
|
- setTimeout(() => {
|
|
|
|
|
- const tableElement = multipleTableRef.value?.$el as HTMLElement;
|
|
|
|
|
- if (tableElement) {
|
|
|
|
|
- const offsetTop = tableElement.offsetTop; // 获取 offsetTop
|
|
|
|
|
- let height = window.innerHeight;
|
|
|
|
|
- tableHeight.value = height - offsetTop - 270 + "px";
|
|
|
|
|
- }
|
|
|
|
|
- }, 10);
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
|
|
+ handleResize();
|
|
|
});
|
|
});
|
|
|
|
|
+function handleResize() {
|
|
|
|
|
+ // 获取当前窗口的高度
|
|
|
|
|
+ const height = window.innerHeight;
|
|
|
|
|
+ // 在这里可以执行其他操作,比如更新某个元素的高度等
|
|
|
|
|
+ const tableElement = multipleTableRef.value?.$el as HTMLElement;
|
|
|
|
|
+ if (tableElement) {
|
|
|
|
|
+ const offsetTop = tableElement.offsetTop; // 获取 offsetTop
|
|
|
|
|
+ tableHeight.value = height - offsetTop - 230 + "px";
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+// 监听窗口的 resize 事件
|
|
|
|
|
+window.addEventListener('resize', handleResize);
|
|
|
const selectable = () => true;
|
|
const selectable = () => true;
|
|
|
const handleSizeChange = (val: number) => {
|
|
const handleSizeChange = (val: number) => {
|
|
|
if (props.pageInfo) {
|
|
if (props.pageInfo) {
|
|
@@ -175,7 +182,6 @@ const handleSizeChange = (val: number) => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
//多选
|
|
//多选
|
|
|
-
|
|
|
|
|
const selectAllChange = (value: any[]) => {
|
|
const selectAllChange = (value: any[]) => {
|
|
|
newSelectionList.value = [];
|
|
newSelectionList.value = [];
|
|
|
if (value.length > 0) {
|
|
if (value.length > 0) {
|
|
@@ -186,7 +192,6 @@ const selectAllChange = (value: any[]) => {
|
|
|
newSelectionList.value = [];
|
|
newSelectionList.value = [];
|
|
|
}
|
|
}
|
|
|
emit('selectAllChange', newSelectionList.value)
|
|
emit('selectAllChange', newSelectionList.value)
|
|
|
-
|
|
|
|
|
}
|
|
}
|
|
|
const selectionChange = (value: any[]) => {
|
|
const selectionChange = (value: any[]) => {
|
|
|
newSelectionList.value = [];
|
|
newSelectionList.value = [];
|
|
@@ -204,7 +209,10 @@ const handleCurrentChange = (val: number) => {
|
|
|
props.pageInfo.pageNum = val
|
|
props.pageInfo.pageNum = val
|
|
|
emit('getList', props.pageInfo);
|
|
emit('getList', props.pageInfo);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+}
|
|
|
|
|
+// 高亮自定义事件
|
|
|
|
|
+const customEventClick = (row: Row) => {
|
|
|
|
|
+ emit('customEventClick', row)
|
|
|
}
|
|
}
|
|
|
//空值处理
|
|
//空值处理
|
|
|
const displayValue = (value: any) => {
|
|
const displayValue = (value: any) => {
|
|
@@ -224,6 +232,9 @@ function getTagTypeAndText(row: Row, column: any) {
|
|
|
function getDisplayText(row: Row, column: any): string {
|
|
function getDisplayText(row: Row, column: any): string {
|
|
|
return column.formatter ? column.formatter(row, column, row[column.prop]) : displayValue(row[column.prop]);
|
|
return column.formatter ? column.formatter(row, column, row[column.prop]) : displayValue(row[column.prop]);
|
|
|
}
|
|
}
|
|
|
|
|
+function customEvent(row: Row, column: any) {
|
|
|
|
|
+ return column.formatter ? column.formatter(row, column, row[column.prop]) : row[column.prop]
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.el-table .el-table__cell .routerlick > a {
|
|
.el-table .el-table__cell .routerlick > a {
|