|
|
@@ -1,69 +1,48 @@
|
|
|
<template>
|
|
|
- <el-table
|
|
|
- v-el-table-infinite-scroll="load"
|
|
|
- :row-key="
|
|
|
+ <el-table v-el-table-infinite-scroll="load" :row-key="
|
|
|
props.tableProperty.rowKey
|
|
|
? props.tableProperty.rowKey
|
|
|
: tablePropertyDefault.rowKey
|
|
|
- "
|
|
|
- :row-style="rowStyle"
|
|
|
- :data="props.tableData"
|
|
|
- :height="
|
|
|
+ " :row-style="rowStyle" :data="props.tableData" :height="
|
|
|
props.tableProperty.height
|
|
|
? props.tableProperty.height
|
|
|
: tablePropertyDefault.height
|
|
|
- "
|
|
|
- :max-height="
|
|
|
+ " :max-height="
|
|
|
props.tableProperty.maxHeight
|
|
|
? props.tableProperty.maxHeight
|
|
|
: tablePropertyDefault.maxHeight
|
|
|
- "
|
|
|
- :stripe="
|
|
|
+ " :stripe="
|
|
|
props.tableProperty.stripe
|
|
|
? props.tableProperty.stripe
|
|
|
: tablePropertyDefault.stripe
|
|
|
- "
|
|
|
- :border="
|
|
|
+ " :border="
|
|
|
props.tableProperty.border
|
|
|
? props.tableProperty.border
|
|
|
: tablePropertyDefault.border
|
|
|
- "
|
|
|
- :highlight-current-row="
|
|
|
+ " :highlight-current-row="
|
|
|
props.tableProperty.highlightCurrentRow
|
|
|
? props.tableProperty.highlightCurrentRow
|
|
|
: tablePropertyDefault.highlightCurrentRow
|
|
|
- "
|
|
|
- :header-cell-class-name="
|
|
|
+ " :header-cell-class-name="
|
|
|
props.tableProperty.headerRowClassName
|
|
|
? props.tableProperty.headerRowClassName
|
|
|
: tablePropertyDefault.headerRowClassName
|
|
|
- "
|
|
|
- :tooltip-effect="
|
|
|
+ " :tooltip-effect="
|
|
|
props.tableProperty.tooltipEffect
|
|
|
? props.tableProperty.tooltipEffect
|
|
|
: tablePropertyDefault.tooltipEffect
|
|
|
- "
|
|
|
- :show-summary="
|
|
|
+ " :show-summary="
|
|
|
props.tableProperty.showSummary
|
|
|
? props.tableProperty.showSummary
|
|
|
: tablePropertyDefault.showSummary
|
|
|
- "
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- :cell-class-name="cellClassName"
|
|
|
- >
|
|
|
+ " :row-class-name="tableRowClassName" :cell-class-name="cellClassName">
|
|
|
<el-table-column v-if="isStatus" width="55">
|
|
|
<template #default="scope">
|
|
|
<div class="tableStatus">
|
|
|
- <div
|
|
|
- v-if="props.tableData[scope.$index].nodeState == '运行'"
|
|
|
- class="status0"
|
|
|
- >
|
|
|
+ <div v-if="props.tableData[scope.$index].nodeState == '运行'" class="status0">
|
|
|
<span class="icon"></span>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-else-if="props.tableData[scope.$index].nodeState == '停止'"
|
|
|
- class="status1"
|
|
|
- >
|
|
|
+ <div v-else-if="props.tableData[scope.$index].nodeState == '停止'" class="status1">
|
|
|
<span class="icon"></span>
|
|
|
</div>
|
|
|
<div v-else class="status2"><span class="icon"></span></div>
|
|
|
@@ -71,50 +50,30 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- label-class-name 可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
|
|
|
- <el-table-column
|
|
|
- class="infinite-list-item"
|
|
|
- v-for="(items, index) in props.tableHeader"
|
|
|
- :key="index"
|
|
|
- :label="items.label"
|
|
|
- :prop="items.key"
|
|
|
- :width="items.width?items.width:props.tableColumnProperty.width"
|
|
|
- :sortable="
|
|
|
+ <el-table-column class="infinite-list-item" v-for="(items, index) in props.tableHeader" :key="index" :label="items.label" :prop="items.key" :width="items.width?items.width:props.tableColumnProperty.width" :sortable="
|
|
|
items.sortable ? items.sortable : props.tableColumnProperty.sortable
|
|
|
- "
|
|
|
- :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip"
|
|
|
- :align="items.align ? items.align : props.tableColumnProperty.align"
|
|
|
- :header-align="
|
|
|
+ " :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip" :align="items.align ? items.align : props.tableColumnProperty.align" :header-align="
|
|
|
items.headerAlign
|
|
|
? items.headerAlign
|
|
|
: props.tableColumnProperty.headerAlign
|
|
|
- "
|
|
|
- :label-class-name="items.lableClass ? items.lableClass : ''"
|
|
|
- :class-name="items.columnClassName"
|
|
|
- >
|
|
|
+ " :label-class-name="items.lableClass ? items.lableClass : ''" :class-name="items.columnClassName">
|
|
|
<template #default="scope">
|
|
|
<!-- 枚举值则为 items.key+'-enum' -->
|
|
|
- {{
|
|
|
+ <template v-if="isChild(scope.row[items.key])">
|
|
|
+ <div class="child-list" v-for="(newItem,ni) in childDatas(scope.row[items.key])" :key="ni">{{newItem}}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{
|
|
|
scope.row[items.key + "-enum"]
|
|
|
? scope.row[items.key + "-enum"]
|
|
|
: scope.row[items.key]
|
|
|
}}
|
|
|
+ </template>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- v-if="props.tableBtnGroup.length"
|
|
|
- label="操作"
|
|
|
- :align="props.tableColumnProperty.align"
|
|
|
- :width="BtnGroupWidth"
|
|
|
- >
|
|
|
+ <el-table-column v-if="props.tableBtnGroup.length" label="操作" :align="props.tableColumnProperty.align" :width="BtnGroupWidth">
|
|
|
<template #default="scope">
|
|
|
- <el-button
|
|
|
- v-for="(btn, index) in props.tableBtnGroup"
|
|
|
- :key="index"
|
|
|
- size="small"
|
|
|
- @click="handleClick(scope.$index, scope.row, btn.param)"
|
|
|
- :class="btn.className"
|
|
|
- >{{ btn.name }}</el-button
|
|
|
- >
|
|
|
+ <el-button v-for="(btn, index) in props.tableBtnGroup" :key="index" size="small" @click="handleClick(scope.$index, scope.row, btn.param)" :class="btn.className">{{ btn.name }}</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -124,6 +83,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { computed } from "vue";
|
|
|
//表格参数
|
|
|
const tablePropertyDefault = {
|
|
|
height: "100%",
|
|
|
@@ -142,9 +102,9 @@ const props = defineProps({
|
|
|
tableHeader: {
|
|
|
type: Array,
|
|
|
default: [
|
|
|
- // { label: "序号", key: "ID", sortable: true ,width:"50px"},
|
|
|
- // { label: "姓名", key: "NAME" },
|
|
|
- // { label: "成绩", key: "score", sortable: true, lableClass: "scoreColumn",columnClassName:"columnClassName" },
|
|
|
+ // { label: "序号", key: "ID", sortable: true ,width:"50px"},
|
|
|
+ // { label: "姓名", key: "NAME" },
|
|
|
+ // { label: "成绩", key: "score", sortable: true, lableClass: "scoreColumn",columnClassName:"columnClassName" },
|
|
|
],
|
|
|
},
|
|
|
//表格参数
|
|
|
@@ -203,6 +163,16 @@ const props = defineProps({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+const isChild = computed(() => (item: any) => {
|
|
|
+ const msg = typeof item === "string" ? item : `${item}`;
|
|
|
+ return msg.includes("-");
|
|
|
+});
|
|
|
+
|
|
|
+const childDatas = computed(() => (item: any) => {
|
|
|
+ const msg = typeof item === "string" ? item : `${item}`;
|
|
|
+ return msg.split("-");
|
|
|
+});
|
|
|
+
|
|
|
//向父组件传参 btnClick：点击按钮后 load 触发下拉加载 cellClass 修改某一行class的触发条件
|
|
|
const emit = defineEmits(["btnClick", "load", "cellClass"]);
|
|
|
|
|
|
@@ -264,38 +234,45 @@ defineExpose({
|
|
|
.infinite-list .infinite-list-item + .list-item {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
-::v-deep.el-table .rowClass {
|
|
|
- height: 40px;
|
|
|
- font-size: 14px;
|
|
|
- color: #101116;
|
|
|
-}
|
|
|
-::v-deep.el-table .headerRowClass {
|
|
|
- height: 40px;
|
|
|
- background: #ffffff;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #101116;
|
|
|
-}
|
|
|
-::v-deep.el-table .editBtn {
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #f79ec6;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ac014d;
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep.el-table .delBtn {
|
|
|
- background: #eb2f3b;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- border: none;
|
|
|
+:deep.el-table {
|
|
|
+ .rowClass {
|
|
|
+ height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #101116;
|
|
|
+ }
|
|
|
+ .headerRowClass {
|
|
|
+ height: 40px;
|
|
|
+ background: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ }
|
|
|
+ .editBtn {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #f79ec6;
|
|
|
+ box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ac014d;
|
|
|
+ }
|
|
|
+ .delBtn {
|
|
|
+ background: #eb2f3b;
|
|
|
+ box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .child-list {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #101116;
|
|
|
+ }
|
|
|
}
|
|
|
-::v-deep.el-table--striped
|
|
|
+:deep.el-table--striped
|
|
|
.el-table__body
|
|
|
tr.el-table__row--striped
|
|
|
td.el-table__cell {
|
