@lx-frontend/wrap-element-ui 0.4.5 → 0.4.6-beta.0

package/package.json

@@ -1,18 +1,10 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "0.4.5",
+  "version": "0.4.6-beta.0",
   "description": "wrap-element-ui",
   "author": "Vic <18373209286@163.com>",
   "main": "packages/index.js",
   "private": false,
-  "scripts": {
-    "serve": "npm run build:style && vue-cli-service serve",
-    "build:style": "gulp build --gulpfile packages/theme-default/gulpfile.js",
-    "dist": "npm run build:style && vue-cli-service build",
-    "build:single": "webpack --config build/build-one-by-one.js",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
-  },
   "dependencies": {
     "cheerio": "^1.0.0-rc.2",
     "core-js": "^3.3.2",
@@ -20,7 +12,7 @@
     "highlight.js": "^9.16.2",
     "markdown-it-anchor": "^4.0.0",
     "markdown-it-container": "^2.0.0",
-    "vue": "^2.6.10",
+    "vue": "^2.7.16",
     "vue-markdown-loader": "^2.2.3",
     "vue-router": "^3.1.3"
   },
@@ -42,7 +34,15 @@
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "typescript": "~3.5.3",
-    "vue-template-compiler": "^2.6.10",
+    "vue-template-compiler": "^2.7.16",
     "webpack-cli": "^3.3.10"
+  },
+  "scripts": {
+    "serve": "npm run build:style && vue-cli-service serve",
+    "build:style": "gulp build --gulpfile packages/theme-default/gulpfile.js",
+    "dist": "npm run build:style && vue-cli-service build",
+    "build:single": "webpack --config build/build-one-by-one.js",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
   }
-}
+}

package/packages/LxTable/src/LxTable.vue

@@ -1,4 +1,3 @@
-
 <!--
   @row-click="handleRowClick" 当某一行被点击时会触发该事件
   @cell-click="handleCellClick" 当某个单元格被点击时会触发该事件
@@ -10,7 +9,7 @@
 -->
 <template>
   <div class="table-content">
-    <FElTable
+    <el-table
       v-loading="loading"
       ref="lxTableRef"
       v-bind="$attrs"
@@ -22,8 +21,17 @@
       @sort-change="sortChange"
       :highlight-current-row="highlightCurrentRow"
       :row-class-name="tableRowClassName"
-      :default-sort="(customConfig || {}).sortValue || defaultSort">
-      <ElTableColumn v-if="customConfig.selection && customConfig.selection.isOpenSelection" type="selection" :width="customConfig.selection.width">
+      :default-sort="(customConfig || {}).sortValue"
+    >
+      <ElTableColumn
+        v-if="
+          customConfig &&
+          customConfig.selection &&
+          customConfig.selection.isOpenSelection
+        "
+        type="selection"
+        :width="customConfig.selection.width"
+      >
       </ElTableColumn>
       <ElTableColumn
         v-for="(item, index) in cloumns"
@@ -33,250 +41,238 @@
         :sortable="getFieldFromConfig(keys[index], 'sortable')"
         :width="getFieldFromConfig(keys[index], 'width')"
         :min-width="getFieldFromConfig(keys[index], 'minWidth')"
-        :fixed="getFieldFromConfig(keys[index], 'fixed')">
-        <template slot="header" slot-scope="scope">
-          <slot template
+        :fixed="getFieldFromConfig(keys[index], 'fixed')"
+      >
+        <template #header="scope">
+          <slot
+            template
             :name="`${keys[index]}_header`"
             :keys="keys[index]"
-            :row="scope.row"
+            :row="returnSelf<TableData>(scope.row)"
             :lable="scope.column"
             :column="scope.$index"
             v-if="getFieldFromConfig(keys[index], 'scopeHeader')"
-            >
+          >
           </slot>
           <span v-else>
-            {{item}}
+            {{ item }}
           </span>
         </template>
-        <template slot-scope="scope">
+        <template #default="scope">
           <!-- 支持keys字段为'car.id'或者'id' -->
           <div v-if="keys[index].indexOf('.') != -1">
-              <!-- 一个td需要展示多个字段名 -->
-              <div v-if="Array.isArray(keys[index])">
-                <div
-                  v-for="(array, i) in keys[index]"
-                  :key="i">
-                  {{scope.row[array]}}
-                </div>
+            <!-- 一个td需要展示多个字段名 -->
+            <div v-if="Array.isArray(keys[index])">
+              <div v-for="(array, i) in keys[index]" :key="i">
+                {{ scope.row[array] }}
               </div>
-              <!-- 字段formatters存在,数据过滤-->
-              <span
-                v-else-if="getFieldFromConfig(keys[index], 'formatters')">
-                  {{formatterMethods(scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]], (customConfig[keys[index]].formatters))}}
+            </div>
+            <!-- 字段formatters存在,数据过滤-->
+            <span v-else-if="getFieldFromConfig(keys[index], 'formatters')">
+              {{
+                formatterMethods(
+                  scope.row[keys[index].split(".")[0]][
+                    keys[index].split(".")[1]
+                  ],
+                  customConfig[keys[index]].formatters
+                )
+              }}
+            </span>
+            <!-- 复杂情况需要自定义---当前keys存在于customConfig.template数据定义中，传入slot的name作为唯一标识符 -->
+            <slot
+              template
+              :name="keys[index]"
+              :keys="keys[index]"
+              :row="returnSelf<TableData>(scope.row)"
+              :lable="scope.column"
+              :column="scope.$index"
+              v-else-if="getFieldFromConfig(keys[index], 'template')"
+            >
+            </slot>
+            <div v-else>
+              <!-- 传入不需要截取的列 -->
+              <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
+                {{
+                  formateValue(
+                    scope.row[keys[index].split(".")[0]][
+                      keys[index].split(".")[1]
+                    ]
+                  )
+                }}
               </span>
-              <!-- 复杂情况需要自定义---当前keys存在于customConfig.template数据定义中，传入slot的name作为唯一标识符 -->
-              <slot template
-                :name="keys[index]"
-                :keys="keys[index]"
-                :row="scope.row"
-                :lable="scope.column"
-                :column="scope.$index"
-                v-else-if="getFieldFromConfig(keys[index], 'template')"
-                >
-              </slot>
-              <div v-else>
-                <!-- 传入不需要截取的列 -->
-                  <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
-                      {{scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]] | formateValue}}
-                  </span>
-                  <Ellipsis
-                    v-else
-                    :popoverName="popoverName"
-                    :lineCount="getFieldFromConfig(keys[index], 'lineCount')"
-                    :content="[`${scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]]}`] | formateValue">
-                    <div slot="popover">
-                      <div>{{scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]] | formateValue}}</div>
-                    </div>
-                  </Ellipsis>
-              </div>
+              <Ellipsis
+                v-else
+                :popoverName="popoverName"
+                :lineCount="getFieldFromConfig(keys[index], 'lineCount')"
+                :content="
+                  formateValue([
+                    `${
+                      scope.row[keys[index].split('.')[0]][
+                        keys[index].split('.')[1]
+                      ]
+                    }`,
+                  ])
+                "
+              >
+                <template #popover>
+                  <div>
+                    {{
+                      formateValue(
+                        scope.row[keys[index].split(".")[0]][
+                          keys[index].split(".")[1]
+                        ]
+                      )
+                    }}
+                  </div>
+                </template>
+              </Ellipsis>
+            </div>
           </div>
           <div v-else>
-              <!-- 一个td需要展示多个字段名 -->
-              <div v-if="Array.isArray(keys[index])">
-                <div
-                  v-for="(array, i) in keys[index]"
-                  :key="i">
-                  {{scope.row[array]}}
-                </div>
+            <!-- 一个td需要展示多个字段名 -->
+            <div v-if="Array.isArray(keys[index])">
+              <div v-for="(array, i) in keys[index]" :key="i">
+                {{ scope.row[array] }}
               </div>
-              <!-- 字段formatters存在,数据过滤-->
-              <span
-                v-else-if="getFieldFromConfig(keys[index], 'formatters')">
-                  {{formatterMethods(scope.row[keys[index]], (customConfig[keys[index]].formatters))}}
+            </div>
+            <!-- 字段formatters存在,数据过滤-->
+            <span v-else-if="getFieldFromConfig(keys[index], 'formatters')">
+              {{
+                formatterMethods(
+                  scope.row[keys[index]],
+                  customConfig[keys[index]].formatters
+                )
+              }}
+            </span>
+            <!-- 复杂情况需要自定义---当前keys存在于customConfig.template数据定义中，传入slot的name作为唯一标识符 -->
+            <slot
+              template
+              :name="keys[index]"
+              :keys="keys[index]"
+              :row="returnSelf<TableData>(scope.row)"
+              :lable="scope.column"
+              :column="scope.$index"
+              v-else-if="getFieldFromConfig(keys[index], 'template')"
+            >
+            </slot>
+            <div v-else>
+              <!-- 传入不需要截取的列 -->
+              <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
+                {{ formateValue(scope.row[keys[index]]) }}
               </span>
-              <!-- 复杂情况需要自定义---当前keys存在于customConfig.template数据定义中，传入slot的name作为唯一标识符 -->
-              <slot template
-                :name="keys[index]"
-                :keys="keys[index]"
-                :row="scope.row"
-                :lable="scope.column"
-                :column="scope.$index"
-                v-else-if="getFieldFromConfig(keys[index], 'template')">
-              </slot>
-              <div v-else>
-                  <!-- 传入不需要截取的列 -->
-                  <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
-                    {{scope.row[keys[index]] | formateValue}}
-                  </span>
-                  <Ellipsis
-                    v-else
-                    :popoverName="popoverName"
-                    :lineCount="getFieldFromConfig(keys[index], 'lineCount')"
-                    :content="[`${scope.row[keys[index]]}`] | formateValue">
-                    <div slot="popover">
-                      <div>{{scope.row[keys[index]] | formateValue}}</div>
-                    </div>
-                  </Ellipsis>
-              </div>
+              <Ellipsis
+                v-else
+                :popoverName="popoverName"
+                :lineCount="getFieldFromConfig(keys[index], 'lineCount')"
+                :content="formateValue([`${scope.row[keys[index]]}`])"
+              >
+                <template #popover>
+                  <div>{{ formateValue(scope.row[keys[index]]) }}</div>
+                </template>
+              </Ellipsis>
+            </div>
           </div>
         </template>
       </ElTableColumn>
-
-
-    </FElTable>
+    </el-table>
     <ElPagination
       @current-change="handleCurrentChange"
       :background="background"
       :current-page="currentPage"
       :page-size="pageSize"
       :total="totals"
-      layout="total, prev, pager, next, jumper, slot" v-if="currentPage">
+      layout="total, prev, pager, next, jumper, slot"
+      v-if="currentPage"
+    >
     </ElPagination>
   </div>
 </template>
-<script>
-  import Ellipsis from '../../Ellipsis';
-  import { Table } from 'element-ui'
-  const FElTable = {
-    extends: Table,
-    methods: {
-      doLayout (...args) {
-        Table.methods.doLayout.call(this, ...args)
-        this.fixLayout() // Looks like we can do it once?
-      },
-      fixLayout () {
-        // Safari header/content misalign fix (possible other browsers?)
-        this.columns.forEach(c => {
-          // element-ui/packages/table/src/layout-observer.js:49
-          const width = c.realWidth || c.width
-          let th = this.$el.querySelector(`table.el-table__header th.${c.id}`)
-          if (th) {
-            if (th.offsetWidth !== width) {
-              th.style = `min-width: ${width}px; max-width: ${width}px;`
-            }
-            let td
-            for (td of this.$el.querySelectorAll(`table.el-table__body td.${c.id}`)) {
-              if (td.offsetWidth === width) break
-              td.style = `min-width: ${width}px; max-width: ${width}px;`
-            }
-          }
-        })
-      }
-    }
-  }
+<script lang="ts" setup generic="K = any, TableData = Record<string, any>">
+import Ellipsis from "../../Ellipsis";
 
-  export default {
-    name: 'LxTable',
-    components: {
-      Ellipsis,
-      FElTable
-    },
-    data() {
-      return {
-        scope: 'scope',
-      };
-    },
-    props: {
-      tableData: {
-        type : Array,
-        default: () => [],
-      },
-      cloumns: {
-        type : Array,
-        default: () => [],
-      },
-      customConfig: Object,
-      keys: {
-        type : Array,
-        default: () => [],
-      },
-      defaultSort: {
-        prop: '',
-        order: null,
-      },
-      stripe: {
-        type: Boolean,
-        default: true,
-      },
-      loading: {
-        type: Boolean,
-        default: false,
-      },
-      background: {
-        type: Boolean,
-        default: true,
-      },
-      totals: Number,
-      pageSize: Number,
-      currentPage: Number,
-      popoverName: String,
-      parentFn: {
-        type : String,
-        default: '',
-      },
-      highlightCurrentRow: {
-        type: Boolean,
-        default: true,
-      },
-      tableRowClassName: {},
-    },
-    filters: {
-      formateValue (val) {
-        if (Array.isArray(val) && (val[0] === 'null' || val[0] === '')) {
-          val = '';
-        }
-        return (val || val === 0) ? val : '--';
-      },
-    },
-    methods: {
-      handleCurrentChange(val) {
-        this.$emit('handleCurrentChange', val);
-      },
-      handleSelectionChange(val) {
-        this.$emit('handleSelectionChange', val);
-      },
-      handleRowClick(row, column, cell, event) {
-        this.$emit('handleRowClick', row, column, cell, event);
-      },
-      handleCellClick(row, column, cell, event){
-        this.$emit('handleCellClick', row, column, cell, event);
-      },
-      sortChange(column, prop, order) {
-        this.$emit('sortChange', column, prop, order);
-      },
-      formatterMethods(key, keyData) {
-        // 返回数据，可类型转换; 可添加单位;
-        let value = '--';
-        if (key || key === 0) {
-          const keyValue = keyData[key] || key;
-          const unit = keyData.unit || '';
-          value = `${keyValue}${unit}`;
-        }
-        return value;
-      },
-      formateValue (val) {
-        return val || val === 0 ? val : '--';
-      },
-      getFieldFromConfig(index, name) {
-        return this.customConfig && this.customConfig[index] && this.customConfig[index][name];
-      },
-    }
+const $emit = defineEmits([
+  "handleCurrentChange",
+  "handleSelectionChange",
+  "handleRowClick",
+  "handleCellClick",
+  "sortChange",
+]);
+const props = withDefaults(
+  defineProps<{
+    tableData: TableData[];
+    cloumns: any[];
+    keys: K[];
+    customConfig?: Record<string, any>;
+    stripe?: boolean;
+    loading?: boolean;
+    background?: boolean;
+    totals?: number;
+    pageSize?: number;
+    currentPage?: number;
+    popoverName?: string;
+    highlightCurrentRow?: boolean;
+    tableRowClassName?: Record<string, any>;
+  }>(),
+  {
+    tableData: () => [],
+    cloumns: () => [],
+    keys: () => [],
+    customConfig: () => ({}),
+    stripe: true,
+    loading: true,
+    background: true,
+    highlightCurrentRow: true,
+    tableRowClassName: () => ({}),
+  }
+);
+function returnSelf<Data> (data: Data){
+  return data
+}
+const handleCurrentChange = (val: any) => {
+  $emit("handleCurrentChange", val);
+};
+const handleSelectionChange = (val: any) => {
+  $emit("handleSelectionChange", val);
+};
+const handleRowClick = (row: any, column: any, cell: any, event: any) => {
+  $emit("handleRowClick", row, column, cell, event);
+};
+const handleCellClick = (row: any, column: any, cell: any, event: any) => {
+  $emit("handleCellClick", row, column, cell, event);
+};
+const sortChange = (column: any, prop: any, order: any) => {
+  $emit("sortChange", column, prop, order);
+};
+const formatterMethods = (
+  key: number,
+  keyData: { [x: string]: any; unit: string }
+) => {
+  // 返回数据，可类型转换; 可添加单位;
+  let value = "--";
+  if (key || key === 0) {
+    const keyValue = keyData[key] || key;
+    const unit = keyData.unit || "";
+    value = `${keyValue}${unit}`;
   }
+  return value;
+};
+const formateValue = (val: string | number | string[]) => {
+  if (Array.isArray(val) && (val[0] === "null" || val[0] === "")) {
+    val = "";
+  }
+  return val || val === 0 ? val : "--";
+};
+const getFieldFromConfig = (index: string | number, name: string | number) => {
+  return (
+    props.customConfig &&
+    props.customConfig[index] &&
+    props.customConfig[index][name]
+  );
+};
 </script>
 <style type="scss">
-  .table-content .el-pagination {
-    text-align: right;
-    padding: 14px 0;
-  }
+.table-content .el-pagination {
+  text-align: right;
+  padding: 14px 0;
+}
 </style>
-