xianniu-ui 0.1.8-beta → 0.1.10-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.1.8-beta",
+  "version": "0.1.10-beta",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {
@@ -24,7 +24,6 @@
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
-    "element-ui": "^2.15.10",
     "good-storage": "^1.1.1",
     "vue": "^2.6.11",
     "vue-lottie": "^0.2.1",
@@ -44,6 +43,7 @@
     "copy-webpack-plugin": "^5.1.2",
     "cp-cli": "^2.0.0",
     "cross-env": "^7.0.3",
+    "element-ui": "^2.15.10",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "highlight.js": "^9.3.0",

package/packages/table/main.vue

@@ -2,7 +2,7 @@
   <div class="xn-table-box">
     <div class="xn-table-box-tools" :class="{ 'is-border': !border }">
       <div class="flex justify-content-between align-items-center">
-        <div class="fz-12" :class="{'pb-10':selection}">
+        <div class="fz-12" :class="{ 'pb-10': selection }">
           <template v-if="selection">
             <span>已选择 {{ selectedData.length }} 项</span>
             <el-button
@@ -15,7 +15,10 @@
             >
           </template>
         </div>
-        <div :class="{'pb-10': $slots.tools || tools.length}" class=" flex justify-content-between align-items-center">
+        <div
+          :class="{ 'pb-10': $slots.tools || tools.length }"
+          class="flex justify-content-between align-items-center"
+        >
           <slot name="tools">
             <!-- <el-button-group> -->
             <div>
@@ -117,11 +120,92 @@
 
       <slot name="column">
         <template v-for="(item, idx) in columns">
-          <column
+          <el-table-column
+            v-bind="item"
+            v-on="$listeners"
+            :key="idx"
+            v-if="isShowColumn(item)"
+          >
+            <template v-if="item.labelMsg">
+              <template slot="header">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="item.labelMsg"
+                  placement="right"
+                >
+                  <span>{{ item.label }} <i class="el-icon-question"></i></span>
+                </el-tooltip>
+              </template>
+            </template>
+            <template slot-scope="{ row, $index }">
+              <expandDom
+                v-if="item.render"
+                :column="row"
+                :row="row"
+                :render="item.render"
+                :index="$index"
+              ></expandDom>
+              <template v-else>
+                {{ row[item.prop] }}
+              </template>
+              <!-- 更多操作 -->
+              <template v-if="item.more && item.more.options.length">
+                <template v-for="(itemBtn, idxBtn) in item.more.options">
+                  <expand-dom
+                    v-if="itemBtn.render && itemBtn.show && itemBtn.show(row)"
+                    :key="idxBtn"
+                    :column="itemBtn"
+                    :row="row"
+                    :render="itemBtn.render"
+                    :index="idxBtn"
+                  />
+                  <template v-else>
+                    <el-popconfirm
+                      v-if="itemBtn.isPopConfirm"
+                      :title="
+                        itemBtn.options.title ||
+                        `确定${label(itemBtn, row)}吗？`
+                      "
+                      :key="idxBtn"
+                      :confirm-button-text="itemBtn.options.confirmButtonText"
+                      class="ml-10"
+                      @confirm="handleClick(itemBtn.method, row, $index)"
+                    >
+                      <el-button
+                        :type="itemBtn.type || 'text'"
+                        :size="itemBtn.size || 'mini'"
+                        :icon="itemBtn.icon"
+                        :plain="itemBtn.plain"
+                        slot="reference"
+                        >{{ label(itemBtn, row) }}</el-button
+                      >
+                    </el-popconfirm>
+                    <template v-else>
+                      <el-button
+                        v-if="itemBtn.show ? itemBtn.show(row) : true"
+                        :key="idxBtn"
+                        :disabled="
+                          itemBtn.disabled ? itemBtn.disabled(row) : false
+                        "
+                        :type="itemBtn.type || 'text'"
+                        :size="itemBtn.size || 'mini'"
+                        :icon="itemBtn.icon"
+                        :plain="itemBtn.plain"
+                        @click="handleClick(itemBtn.method, row, $index)"
+                        >{{ label(itemBtn, row) }}</el-button
+                      >
+                    </template>
+                  </template>
+                </template>
+              </template>
+            </template>
+          </el-table-column>
+          <!-- <column
             :key="idx"
             v-if="item.checked === true"
             v-bind="item"
-          ></column>
+          ></column> -->
         </template>
       </slot>
     </el-table>
@@ -139,10 +223,30 @@
 </template>
 
 <script>
-import column from "./column.vue";
 export default {
   name: "XnTable",
-  components: { column },
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        row: Object,
+        render: Function,
+        index: Number,
+        column: {
+          type: Object,
+          default: null,
+        },
+      },
+      render: (h, ctx) => {
+        const params = {
+          row: ctx.props.row,
+          index: ctx.props.index,
+        };
+        if (ctx.props.column) params.column = ctx.props.column;
+        return ctx.props.render(h, params);
+      },
+    },
+  },
   props: {
     tools: {
       type: Array,
@@ -184,7 +288,23 @@ export default {
       selectedData: [],
     };
   },
-  computed: {},
+  computed: {
+    label() {
+      return (itemBtn, row) => {
+        return typeof itemBtn.label === "function"
+          ? itemBtn.label(row)
+          : itemBtn.label;
+      };
+    },
+    isShowColumn() {
+      return (row) => {
+        if (row.show != undefined) {
+          return typeof row.show === "function" ? row.show() : row.show;
+        }
+        return true;
+      };
+    },
+  },
   created() {
     this.columns.length &&
       this.columns.forEach((item) => {
@@ -222,6 +342,15 @@ export default {
     doLayout() {
       this.$refs.table.doLayout();
     },
+    handleClick(method, row, index) {
+      if (this.$parent) {
+        this.$parent.$emit("handle-buttons", {
+          method,
+          row,
+          index,
+        });
+      }
+    },
   },
 };
 </script>