瀏覽代碼

添加表格、表单插槽

ymy 2 年之前
父節點
當前提交
603723516a

+ 2 - 0
src/benyun/components/byForm/byForm.vue

@@ -30,6 +30,8 @@
               v-bind="$attrs" 
               v-on="$listeners" 
               />
+              <slot v-if="item.slot" :name='item.prop' :value='value'></slot>
+              <!-- <slot :[item.prop]="value" ></slot> -->
           </el-form-item>
         </el-col>
       </el-row>

+ 5 - 0
src/benyun/components/byTable/byTable.vue

@@ -44,6 +44,11 @@
         :fixed="item.fixed"
         :align="item.align"
       >
+      <template #default="{ row }">
+        <slot v-if="item.slot" :name='item.field' :row='row'></slot>
+        <span v-else>{{ row[item.field] }}</span>
+      </template>
+      
       </vxe-column>
   </template>
   </vxe-table>

+ 8 - 1
src/views/demo/form.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="form" >
     <by-tool :propConfig="toolConfig" @onAdd="onAdd" :customTools="customTools" />
-    <by-form :propConfig="config" ref="form" />
+    <by-form :propConfig="config" ref="form">
+      <template v-slot:slotField='{ value }'>这是插槽:{{ value.name }}</template>
+    </by-form>
     <el-button type="primary" @click="getFormData">获取数据</el-button>
     <el-button type="primary" @click="getFormVali">获取表单验证</el-button>
   </div>
@@ -93,6 +95,11 @@ export default class DemoForm extends Vue {
           format:'yyyy-MM-dd',
           type:'date'
         }
+      },{
+        span:6,
+        label:'插槽',
+        slot:true,
+        prop:'slotField',
       }]
     ]
   }

+ 8 - 1
src/views/demo/table.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="table">
-    <by-table :propConfig="config" ref="table"></by-table>
+    <by-table :propConfig="config" ref="table">
+      <template v-slot:slotField='{ row }'>插槽:{{ row.name }}</template>
+    </by-table>
     <el-button type="primary" @click="setData">设置数据</el-button>
     <el-button type="primary" @click="getSelect">获取选中数据</el-button>
   </div>
@@ -32,6 +34,11 @@ export default class DemoTable extends Vue {
       title:'日期',
       field:'time'
     },
+    {
+      title:'插槽',
+      field:'slotField',
+      slot:true
+    },
     {
       title:'操作',
       action:true,