基础用例

• label-suffix 可以用来设置中间的：
• group-size 可以设置当前一行需要几个 默认4个
• align 可以设置字体对齐方式 默认Left

<template>
  <db-text-form :list="list" :value="value"></db-text-form>
</template>
<script>
  export default {
    data() {
      return {
        value: {
          value1: '108种',
          value2: '12种',
          value3: '43种',
          value4: '34种',
          value5: '122种',
          value6: '43种'
        },
        list: [
          {
            name: '重疾险种',
            key: 'value1',
            code: '1100'
          },
          {
            name: '意外险种',
            key: 'value2'
          },
          {
            name: '医疗险种',
            key: 'value3'
          },
          {
            name: '理财险',
            key: 'value4'
          },
          {
            name: '车险',
            key: 'value5'
          },
          {
            name: '防癌险',
            key: 'value6'
          }
        ]
      };
    }
  };
</script>

Expand Copy Copy

可换行

<template>
  <db-text-form :list="list" :value="value">
  </db-text-form>
</template>
<script>
  export default {
    data() {
      return {
        value: {
          value1: '108种',
          value2: '12种',
          value3: '43种',
          value4: '34种',
          value5: '122种',
          value6: '43种'
        },
        list: [
          {
            name: '重疾险种',
            key: 'value1'
          },
          {
            name: '意外险种',
            key: 'value2'
          },
          {
            type: 'br'
          },
          {
            name: '医疗险种',
            key: 'value3'
          },
          {
            name: '理财险',
            key: 'value4'
          },
          {
            name: '车险',
            key: 'value5'
          },
          {
            name: '防癌险',
            key: 'value6'
          }
        ]
      };
    }
  };
</script>

Expand Copy Copy

插槽使用

• 1.5.5 之后可以使用插槽，插槽会默认覆盖内容

<template>
  <db-text-form :list="list" :value="value">
    <template v-slot:value1="{ item }">
      这个是插槽内容：{{item}}
    </template>
  </db-text-form>
</template>
<script>
  export default {
    data() {
      return {
        value: {
          value1: '108种',
          value2: '12种',
          value3: '43种',
          value4: '34种',
          value5: '122种',
          value6: '43种'
        },
        list: [
          {
            name: '重疾险种',
            key: 'value1'
          },
          {
            name: '意外险种',
            key: 'value2'
          },
          {
            name: '医疗险种',
            key: 'value3'
          },
          {
            name: '理财险',
            key: 'value4'
          },
          {
            name: '车险',
            key: 'value5'
          },
          {
            name: '防癌险',
            key: 'value6'
          }
        ]
      };
    }
  };
</script>

Expand Copy Copy

属性

表格的属性说明如下：

属性	说明	类型	默认值	版本
list	数据	Array		1.5.4
value	具体取值	Object		1.5.4
label-suffix	可以用来设置中间的:	String	'：'	1.5.4
group-size	可以设置当前一行需要几个	Number	4	1.5.4
align	可以设置字体对齐方式	String	Left	1.5.4