[feature]{CommonTable,CrudTable}: 支持自定义slot

BoBoooooo · Mar 18, 2019 · 1a94bc5 · 1a94bc5
1 parent 13c0c39
commit 1a94bc5
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 15 deletions.
diff --git a/src/components/CommonTable/index.vue b/src/components/CommonTable/index.vue
@@ -29,10 +29,19 @@
         :min-width="item.min_width"
         :header-align="item.header_align"
         :show-overflow-tooltip="item.show_overflow_tooltip"
-      />
-      <el-table-column label="操作" align="center" min-width="110px" fixed="right">
+      >
         <template slot-scope="scope">
-          <v-btn
+            <template v-if="item.slotName">
+            <slot :name="item.slotName"
+                  :row="scope.row"
+                  :prop="item.prop"
+                  :$index="scope.$index" />
+          </template>
+          <template  v-else>
+            <span>
+            {{ scope.row[item.prop] }}
+          </span>
+      <!-- <v-btn
             :key="index"
             :color="btn.color"
             v-for="(btn,index) in getShowButton"
@@ -42,7 +51,9 @@
           >
             {{btn.label}}
             <v-icon>{{btn.icon}}</v-icon>
-          </v-btn>
+          </v-btn> -->
+          </template>
+
         </template>
       </el-table-column>
     </el-table>

diff --git a/src/components/CrudTable/index.vue b/src/components/CrudTable/index.vue
@@ -20,13 +20,27 @@
       :table-json="jsonData.config.columnList"
       :list-query="listQuery"
       :list-loading="listLoading"
-      @handleEdit="Edit"
-      @handleDetail="Detail"
-      @handleDelete="Delete"
       @handleCurrentChange="Refresh"
       @handleSizeChange="Refresh"
       :handleButton="handleButton"
-    />
+    >
+      <template slot="handleButton" slot-scope="scope">
+          <v-btn size color="blue" small dark @click.stop="Edit(scope.row.id)">
+            修改
+          </v-btn>
+           <v-btn color="green" small dark @click.stop="Detail(scope.row.id)">
+            详情
+          </v-btn>
+           <v-btn color="red" small dark @click.stop="Delete(scope.row.id)">
+            删除
+          </v-btn>
+          <slot name="customButton" :row="scope.row"></slot>
+      </template>
+      <template slot="formatter" slot-scope="scope">
+        <slot name="formatter"
+        :row="scope.row"></slot>
+      </template>
+    </common-table>
 
     <el-dialog
       :title="textMap[dialogStatus]"

diff --git a/src/components/FormDesigner/GenerateForm.vue b/src/components/FormDesigner/GenerateForm.vue
@@ -65,14 +65,14 @@
 
 <script>
 // 常规组件
-import GenetateFormItem from './GenerateFormItem';
+import GenerateFormItem from './GenerateFormItem';
 
 export default {
   name: 'FmGenerateForm',
   components: {
-    GenetateFormItem,
+    GenerateFormItem,
   },
-  props: ['data', 'value', 'disabled', 'clear'],
+  props: ['data', 'value', 'disabled', 'clear', 'remote'],
   // data 初始化表单
   // value 表单赋值
   // clear 清空表单

diff --git a/src/components/FormDesigner/GenerateFormItem.vue b/src/components/FormDesigner/GenerateFormItem.vue
@@ -181,11 +181,12 @@ import Tinymce from '@/components/Tinymce' // 富文本编辑器
 import UploadAffix from '@/components/UploadAffix'; // 上传模块
 
 export default {
+  name: 'GenerateFormItem',
   components: {
     Tinymce,
     UploadAffix,
   },
-  props: ['widget', 'models', 'rules', 'disabled'],
+  props: ['widget', 'models', 'rules', 'disabled', 'remote'],
   data() {
     return {
       dataModel: this.models[this.widget.model],
@@ -206,8 +207,7 @@ export default {
     disabled: {
       deep: true,
       immediate: true,
-      handler(val) {
-        this.dataModel = val[this.widget.model]
+      handler() {
         if (this.widget.options.uploadParams) {
           this.widget.options.uploadParams.IsDetail = this.disabled
         }

diff --git a/src/components/FormDesigner/ListConfig.vue b/src/components/FormDesigner/ListConfig.vue
@@ -138,7 +138,7 @@
           </td>
           <td>
             <el-input type="textarea"
-              v-model="item.formatter"
+              v-model="item.slotName"
               placeholder="自定义列"></el-input>
           </td>