【EDI前端】暂存

Web/src/components/elTable/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-table 
-    ref="tableRef" 
+    ref="table_Ref" 
     row-key="id" 
     :data="props.tableData" 
     :border="true"
@@ -33,14 +33,15 @@
           :type="btn.type"
           :link="btn.link"
           @click="leftOperationHadel(btn,scope)"
+          :disabled="typeof btn.disabled == 'function' ? btn.disabled(scope.row,scope) : btn.disabled"
+          v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide"
         >{{btn.label}}</el-button>
       </template>
     </el-table-column>
-
+    <template v-for="(item, index) in innerTableColums" :key="index">
       <!-- 数据列 -->
       <el-table-column
-      v-for="(item, index) in props.tableColumns" 
-      :key="index"
+        v-if="!item.setNoShow"
         :label="item.title"
         :prop="item.prop"
         :sortable="item.sortable || 'custom'"
@@ -118,6 +119,7 @@
           <span v-else> {{ scope.row[item.prop] }} </span>
         </template>
       </el-table-column>
+    </template>
 
     <!-- 右侧操作列 -->
     <el-table-column 
@@ -144,13 +146,18 @@
   
 <script setup>
   defineOptions({ name: 'elTable' })
-  import { h,reactive, ref, onMounted } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { h,reactive, ref, onMounted,defineExpose,nextTick } from 'vue'
   import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
   import { formatTimeStrToStr } from "@/utils/formatTime";
-  
-  const state = reactive({})
+  import { getLocalTableColumnsName } from '@/utils/common/index'
 
   const props = defineProps({
+    // 特殊的column缓存名称
+    specialLocalColumnName:{
+      type: String,
+      default: null
+    },
     // 多选
     multipleTable:{
       type: Boolean,
@@ -228,6 +235,9 @@
     },
   })
 
+  const innerTableColums = ref([])
+  innerTableColums.value = props.tableColumns
+
   const emits = defineEmits([
     'sortChange',
     'leftOperationHadel',
@@ -238,6 +248,20 @@
     'editItemClearHandle',
   ])
 
+  const table_Ref = ref(null)
+  let _localColumName = props.specialLocalColumnName || useRoute().name
+  const localTableColumnsName = getLocalTableColumnsName(_localColumName)
+
+  window.addEventListener('setItemEvent', (data) => {
+    // console.log("监听到触发了localStorage.setItem事件",data)
+    nextTick(() => {
+      if(data.key == localTableColumnsName){
+        innerTableColums.value = JSON.parse(data.newValue)
+        if(table_Ref.value)table_Ref.value.doLayout()
+      }
+    })
+  })
+
   // 多选
   function tableSelectionHandle (val){
     emits('tableSelectionHandle',val)
@@ -317,6 +341,10 @@
     emits('rightOperationHadel',btn,scope)
   }
 
+  defineExpose({
+    table_Ref,
+  })
+
   onMounted(() => {})
 
 </script>
@@ -333,5 +361,8 @@
     background:#fff;
   }
 }
+.table-danger-row{
+  background:#ffe8e8 !important;
+}
 </style>