<template>
|
<el-table
|
ref="tableRef"
|
border
|
:row-key="rowKey"
|
:row-class-name="rowClassName"
|
:v-bind="dynamicBindProps"
|
:v-on="{ expandChange: isTree ? tableExpandChange : undefined }"
|
:cell-style="tableCellStyle"
|
:header-cell-style="{ textAlign: 'center' }"
|
highlight-current-row
|
:data="data"
|
>
|
<el-table-column type="selection" width="55" v-if="hasSelection"> </el-table-column>
|
<el-table-column type="index" label="序号" width="60" v-if="hasSerialNo" />
|
<el-table-column
|
v-for="(item, index) in header"
|
:key="item.prop"
|
show-overflow-tooltip
|
:prop="item.prop"
|
:width="item.colWidth"
|
:label="item.label"
|
>
|
<template v-slot="scope">
|
<template v-if="item.type === 'image'">
|
<!-- <el-image
|
:style="{ width: `${item.width}px`, height: `${item.height}px` }"
|
:src="scope.row[item.key]"
|
:zoom-rate="1.2"
|
:preview-src-list="[scope.row[item.key]]"
|
preview-teleported
|
fit="cover"
|
/> -->
|
</template>
|
<el-tag
|
v-else-if="item.type === 'tag'"
|
class="table-tag-space"
|
v-for="(tagItem, index) in scope.row[item.prop]"
|
:key="index"
|
>{{ tagItem }}</el-tag
|
>
|
<template v-else>
|
{{ scope.row[item.prop] }}
|
</template>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="optColWidth" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button
|
v-for="(item, index) in rowOperate"
|
:key="index"
|
:icon="item.icon"
|
size="small"
|
text
|
:type="item.buttonType"
|
@click="item.click(scope.row)"
|
>{{ item.text }}</el-button
|
>
|
</template>
|
</el-table-column>
|
<template #empty>
|
<el-empty description="暂无数据" />
|
</template>
|
</el-table>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, ref, toRefs } from 'vue';
|
import { YWTableProps } from '/@/components/table/yw-table';
|
import { tableCellCenterExceptColumn } from '/@/utils/util';
|
import type { TableInstance } from 'element-plus';
|
|
const props = defineProps(YWTableProps);
|
|
const { data, header, rowOperate, hasSelection, hasSerialNo, optColWidth, rowClassName, treeProps, rowKey } = toRefs(props);
|
const tableRef = ref<TableInstance>(null);
|
|
/** @description 通过查找是否含有 Children，判断是否为树形表格 */
|
const isTree = computed(() => {
|
const checkChildrenKey = header.value.some((item) => {
|
return item.prop === treeProps.value.children;
|
});
|
return checkChildrenKey;
|
});
|
|
const treeTableExpandKeys = ref([]);
|
|
const dynamicBindProps = computed(() => {
|
if (isTree.value) {
|
return {
|
treeProps: treeProps.value,
|
expandRowKeys: treeTableExpandKeys.value,
|
};
|
} else {
|
return undefined;
|
}
|
});
|
|
const tableCellStyle = computed((): any => {
|
const preRowNum = [isTree.value, hasSelection.value].filter((item) => item).length;
|
if (preRowNum > 0) {
|
return tableCellCenterExceptColumn(preRowNum - 1);
|
} else {
|
return { textAlign: 'center' };
|
}
|
});
|
|
const tableExpandChange = (row, expanded) => {
|
if (expanded) {
|
treeTableExpandKeys.value.push(row.ID);
|
} else {
|
const idx = treeTableExpandKeys.value.indexOf(row.ID);
|
treeTableExpandKeys.value.splice(idx, 1);
|
}
|
};
|
|
defineExpose({
|
tableRef,
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
