init

src/components/BaseTable/subcomponents/MethodBtn.vue

@@ -0,0 +1,94 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-21 12:07:42
+ * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\MethodBtn.vue
+ * @Description: table右侧方法组件
+-->
+<template>
+  <el-table-column
+    v-if="methodList.length > 0"
+    slot="handleBtn"
+    prop="operation"
+    :label="'tableHeader.operation' | i18nFilter"
+    :width="trueWidth"
+    align="center"
+    :fixed="isFixed ? 'right' : false"
+  >
+    <template slot-scope="scope">
+      <span
+        v-for="(item, index) in methodList"
+        :key="'btn' + index"
+      >
+        <el-button
+          v-show="item.showParam ? (item.showParam.type === 'unequal' ?
+            scope.row[item.showParam.name] !== item.showParam.value : item.showParam.type === 'equal' ?
+              scope.row[item.showParam.name] === item.showParam.value : item.showParam.type === 'more' ?
+                scope.row[item.showParam.name] > item.showParam.value : item.showParam.type === 'less' ?
+                  scope.row[item.showParam.name] < item.showParam.value : item.showParam.type === 'indexof' ?
+                    item.showParam.value.indexof(scope.row[item.showParam.name]) >= 0 : false
+          ) : true"
+          type="text"
+          :style="{color:(item.type === 'delete' ? '#D40000' : '#1990FF')}"
+          style="font-size:14px"
+          size="mini"
+          @click="clickButton({
+            data: scope.row,
+            type: item.type
+          })"
+        >{{ item.btnName | i18nFilter }}</el-button>
+        <span v-if="index < methodList.length-1" style="margin:0 3px">|</span>
+      </span>
+    </template>
+
+  </el-table-column>
+</template>
+
+<script>
+
+/**
+ * 传入的组件prop格式
+ * methodList<MethodItem> = []
+ * Interface MethodItem = {
+ *  btnName: string,
+ *  type: string,
+ *  callback: function (选用)
+ * }
+ *
+ */
+export default {
+  props: {
+    methodList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    isFixed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    trueWidth() {
+      return this.width ? this.width : this.methodList.length * 80
+    }
+  },
+  methods: {
+    clickButton(raw) {
+      this.$emit('clickBtn', {
+        data: raw.data,
+        type: raw.type
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>