CRUD/FORM通用文档

 <el-tabs v-model="activeName" >
  <el-tab-pane label="树型形式" name="first">
      <el-container>
      <el-aside width="300px">
        <el-radio-group v-model="tag" style="margin-bottom:10px">
          <el-radio-button :label="0">全部</el-radio-button>
          <el-radio-button :label="1">表单</el-radio-button>
          <el-radio-button :label="2">表格</el-radio-button>
        </el-radio-group>
        <el-scrollbar style="height:500px">
        <el-input size="small" style="margin-bottom:10px"
          placeholder="输入属性名称或者中文相关介绍"
          v-model="filterText">
        </el-input>
          <el-tree   highlight-current ref="tree" :filter-node-method="filterNode" :data="data"  @node-click="handleNodeClick">
            <span slot-scope="{ node, data }" style="width:100%">{{ data.label }}</span>
          </el-tree>
      </el-aside>
      </el-scrollbar>
      <el-main>
        <ul>
          <li><h3>属性名称：{{item.label || '-'}}</h3></li>
          <li v-if="item.version">
            <el-tooltip effect="dark" content="当前版本以及以上版本才支持该属性" placement="right">
              <h3>支持版本：<i class="el-icon-warning">：</i>
                <el-tag>v{{item.version}}+</el-tag></h3>
            </el-tooltip>
          </li>
          <li v-if="item.del">
            <el-tooltip effect="dark" content="当前版本以及以上版本不在支持该属性，或者对属性做了相关优化，详情查看更新日志" placement="right">
              <h3>废除属性<i class="el-icon-warning">：</i>
                <el-tag type="danger">v{{item.del}}+</el-tag></h3>
            </el-tooltip>
          </li>
          <li v-if="item.type"><h3>数据类型：{{item.type}}</h3></li>
          <li v-if="item.tag"><h3>使用范围：<el-tag>{{item.tag==1?'表单生效(FORM)':'表格生效(CRUD)'}}</el-tag></h3></li>
          <li v-if="item.params"><h3>相关参数：{{item.params}}</h3></li>
          <li><h3>详细说明：<span v-html="item.note || '-'"></span></h3></li>
          <li v-if="item.select"><h3>可选值：{{item.select || '-'}}</h3></li>
          <li v-if="item.default"><h3>默认值：{{item.default}}</h3></li>
          <li v-if="item.href"><h3>参考例子：<a :href="item.href">在线例子</a></h3></li>
        </ul>
      </el-main>
    </el-container>

  </el-tab-pane>
  <el-tab-pane label="表格形式" name="second">
    <avue-crud :option="option" :data="data"></avue-crud>
  </el-tab-pane>
</el-tabs>