label联动

src/components/base.js

@@ -8,8 +8,18 @@ export default {
         return {};
       },
     },
+    datas:{
+      type: Object,
+      default: () => {
+        return {};
+      },
+    }
   },
   methods: {
+    formatLabel(datas, options){
+      if( !options.labels || !options.bind ) return options.label;
+      return options.labels[datas[options.bind]]||options.label;
+    },
     click(link) {
       /* let isLink = ['string', 'number'].indexOf(typeof link) == -1;
       if(!isLink || !link || link=="0" ) return;

src/components/form/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="form mb-4 last:mb-0" :style="options.style">
     <div class="mb-4">
-      <component :is="getComponent(item)" :key="index" :options="item" :value.sync="formData[item.field]" v-for="(item, index) in options.children"></component>
+      <component :is="getComponent(item)" :key="index" :options="item" :datas="formData" :value.sync="formData[item.field]" v-for="(item, index) in options.children"></component>
     </div>
     <v-button :disable="success" :options="buttonOptions" @click="submit"></v-button>
   </div>
@@ -95,7 +95,7 @@ export default {
   border: 1px solid rgba(255, 255, 255, 0.55);
   border-radius: 0.5rem;
   /deep/ .form-label {
-    width: 5rem;
+    width: 5.5rem;
     padding: 0.5rem 0;
     font-size: 1rem;
     line-height: 1;

src/components/form/input.vue

@@ -1,7 +1,7 @@
 
 <template>
   <div class="form-input mb-4 last:mb-0 flex" :style="options.style">
-    <v-label :options="options"></v-label>
+    <v-label :options="options" :datas="datas"></v-label>
     <div class="form-value flex-1">
       <input class="input w-full" :value="options.value" @input="handleChange" />
     </div>

src/components/form/label.vue

@@ -1,28 +1,29 @@
 <template>
-  <div class="form-label flex-0 text-right mr-4">
-    <label :class="{ required: options.required }">{{ options.label }}</label>
+  <div class="form-label flex-0 text-right mr-4" :style="{width:options.labelWidth||'5rem'}">
+    <label :class="{ required: options.required }">{{formatLabel(datas, options)}}</label>
   </div>
 </template>
 <script>
-import Base from '../base';
+  import Base from '../base';
 
-export default {
-  extends: Base,
-}
+  export default {
+    extends: Base,
+  }
 </script>
 <style lang="less" scoped>
-.form-label {
-  position: relative;
-  .required {
-    &::after {
-      content: '*';
-      position: absolute;
-      color: #fe441f;
-      right: -0.5rem;
-      top: 0.5rem;
-      font-size: 1rem;
-      font-weight: bold;
+  .form-label {
+    position: relative;
+
+    .required {
+      &::after {
+        content: '*';
+        position: absolute;
+        color: #fe441f;
+        right: -0.5rem;
+        top: 0.5rem;
+        font-size: 1rem;
+        font-weight: bold;
+      }
     }
   }
-}
 </style>

src/components/form/radio.vue

@@ -1,7 +1,7 @@
 
 <template>
   <div class="form-radio mb-4 last:mb-0 flex" :style="options.style">
-    <v-label :options="options"></v-label>
+    <v-label :options="options" :datas="datas"></v-label>
     <div class="form-value flex-1">
       <div
         class="form-radio-item mb-2 last:mb-0 flex"