1

src/components/tableTemp/index.vue

@@ -69,8 +69,8 @@
         </template>
         <template v-else>
           {{
-            scope.row[items.columnName + '-enum']
-              ? scope.row[items.columnName + '-enum']
+            scope.row[items.columnName + "-enum"]
+              ? scope.row[items.columnName + "-enum"]
               : scope.row[items.columnName]
           }}
         </template>
@@ -91,8 +91,8 @@
           @click="handleClick(scope.$index, scope.row, btn.param)"
         >
           {{
-            btn.name === '停止' && scope.row.runState === '停止'
-              ? '启动'
+            btn.name === "停止" && scope.row.runState === "停止"
+              ? "启动"
               : btn.name
           }}
         </el-button>
@@ -105,14 +105,14 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, watchEffect } from 'vue'
-import { ElTable } from 'element-plus'
-import { CommonTableColumn } from '~/common'
+import { PropType, computed, watchEffect } from "vue";
+import { ElTable } from "element-plus";
+import { CommonTableColumn } from "~/common";
 
 export interface TableButton {
-  name: string
-  className: string
-  param: number
+  name: string;
+  className: string;
+  param: number;
 }
 
 const props = defineProps({
@@ -130,12 +130,12 @@ const props = defineProps({
   tableColumnProperty: {
     type: Object,
     default: {
-      width: '',
-      fixed: '',
+      width: "",
+      fixed: "",
       sortable: false,
       showOverflowTooltip: true,
-      align: 'center',
-      headerAlign: '',
+      align: "center",
+      headerAlign: "",
     },
   },
   // 操作栏按钮组
@@ -151,7 +151,7 @@ const props = defineProps({
   // 操作栏宽度
   btnGroupWidth: {
     type: String,
-    default: '',
+    default: "",
   },
   // 自定义表头
   isStatus: {
@@ -162,108 +162,108 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
+});
 
 //表格参数
 const tableProps = reactive({
-  height: '100%',
-  maxHeight: '100%',
+  height: "100%",
+  maxHeight: "100%",
   stripe: true,
   border: true,
   highlightCurrentRow: false,
-  rowClassName: 'rowClass',
-  headerCellClassName: 'headerCell',
-  tooltipEffect: 'light',
+  rowClassName: "rowClass",
+  headerCellClassName: "headerCell",
+  tooltipEffect: "light",
   showSummary: false,
-  rowKey: '',
-})
+  rowKey: "",
+});
 watchEffect(() => {
-  Object.assign(tableProps, props.tableProperty)
-})
+  Object.assign(tableProps, props.tableProperty);
+});
 
-const tableHeaderList = ref<CommonTableColumn[]>([])
+const tableHeaderList = ref<CommonTableColumn[]>([]);
 watchEffect(() => {
-  tableHeaderList.value = props.tableHeader.filter(column => column.needShow)
-})
+  tableHeaderList.value = props.tableHeader.filter((column) => column.needShow);
+});
 
 const isChild = computed(() => (item: any) => {
-  const msg = typeof item === 'string' ? item : `${item}`
-  return msg.includes('-')
-})
+  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('-')
-})
+  const msg = typeof item === "string" ? item : `${item}`;
+  return msg.split("#");
+});
 
 //向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
 const emit = defineEmits([
-  'btnClick',
-  'load',
-  'cellClass',
-  'rowClick',
-  'cellClick',
-  'select',
-])
+  "btnClick",
+  "load",
+  "cellClass",
+  "rowClick",
+  "cellClick",
+  "select",
+]);
 
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
 const handleClick = (rowIndex: number, row: any, param: number) => {
-  emit('btnClick', rowIndex, row, param)
-}
+  emit("btnClick", rowIndex, row, param);
+};
 
 //行公共样式
 const rowStyle = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
   let styleJson = {
-    height: '50px',
-    fontSize: '14px',
-    color: '#101116',
-  }
-  return styleJson
-}
+    height: "50px",
+    fontSize: "14px",
+    color: "#101116",
+  };
+  return styleJson;
+};
 
 //表格行class样式 可通过父组件直接传class名称修改当前行样式
 const tableRowClassName = ({
   row,
   rowIndex,
 }: {
-  row: any
-  rowIndex: number
+  row: any;
+  rowIndex: number;
 }) => {
   if (row.rowClass) {
-    return row.rowClass
+    return row.rowClass;
   }
-  return ''
-}
+  return "";
+};
 
 //给某一格加class
-const cellClass = ref('')
+const cellClass = ref("");
 const cellClassName = (row: Object) => {
-  emit('cellClass', row)
-  return cellClass.value
-}
+  emit("cellClass", row);
+  return cellClass.value;
+};
 //滚动分页加载
 const load = () => {
-  emit('load', true)
-}
+  emit("load", true);
+};
 
 const rowClickHandler = (row, column, event) => {
-  emit('rowClick', row, column, event)
-}
+  emit("rowClick", row, column, event);
+};
 
 const cellClickHandler = (row, column, cell, event) => {
-  emit('cellClick', row, column, cell, event)
-}
+  emit("cellClick", row, column, cell, event);
+};
 
 const selectHandler = (selection, row) => {
-  emit('select', selection, row)
-}
+  emit("select", selection, row);
+};
 
-const table = ref<InstanceType<typeof ElTable> | null>(null)
+const table = ref<InstanceType<typeof ElTable> | null>(null);
 
 defineExpose({
   cellClass,
   table,
-})
+});
 </script>
 
 <style scoped lang="scss">