如何自定义左侧字段显示

进入此文档说明你已经了解了设计器的基本属性，已经可以成功开始使用了。

前言

如果没有配置左侧字段显示，设计器默认提供了以下几个通用字段。
但不一定所有字段都用的到。我们可以通过includeFileds属性来控制操作栏。

开始

includeFileds ｜ 左侧字段 ｜ Array

默认值 ['group', 'dynamic', 'title', 'input', 'password', 'textarea', 'number', 'url', 'array', 'img', 'map', 'radio', 'checkbox', 'select', 'cascader', 'tree', 'upload', 'year', 'month', 'week', 'date', 'time', 'datetime', 'daterange', 'timerange', 'datetimerange', 'ueditor', 'icon', 'switch', 'rate', 'slider', 'color']

• 假如不需要布局字段中的三个

<template>
  <avue-form-design style="height: 100vh;"
                    :include-fields="includeFields">
  </avue-form-design>
</template>

<script>

export default {
  data() {
    return {
      includeFields: ['input', 'password', 'textarea', 'number', 'url', 'array', 'img', 'map', 'radio', 'checkbox', 'select', 'cascader', 'tree', 'upload', 'year', 'month', 'week', 'date', 'time', 'datetime', 'daterange', 'timerange', 'datetimerange', 'ueditor', 'icon', 'switch', 'rate', 'slider', 'color']
    }
  },
}
</script>

• 假如只需要单行文本字段

<template>
  <avue-form-design style="height: 100vh;"
                    :include-fields="includeFields">
  </avue-form-design>
</template>

<script>

export default {
  data() {
    return {
      includeFields: ['input']
    }
  },
}
</script>

进阶

左侧字段可控制显隐了，但是我要使用自定义的字段怎么办？ 进阶使用