### label
这个属性将会被用在列表页面的表头,新增或修改表单的label部位.
定义例子:
`{"label":"用户名"}`
生成对应前端文件例子:
~~~
<!-- 表头部分 -->
<el-table-column label="用户名" >
<template slot-scope="{row,$index}">
<span>{{ row.username }}</span>
</template>
</el-table-column>
<!-- 表单部分 -->
<el-form-item label="用户名" >
<el-input type="text" v-model="temp.username" placeholder="请输入用户名" clearable ></el-input>
</el-form-item>
~~~
*****
### searchType
声明了这个属性的字段将会出现在搜索栏内,可选值 =、LIKE、>、>=、<、<=.默认值为=.
定义例子:
`{"label":"用户名","searchType":"LIKE"}`
生成对应前端文件例子:
~~~
<el-input type="text" v-model="listQuery.username" placeholder="请输入用户名" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" ></el-input>
~~~
*****
### viewProperties
这个属性中声明的内容将被以key-value的形式赋值到列表页对应的列属性上.
定义例子:
`{"label":"创建时间","viewProperties":{"prop":"createTime"}}`
生成对应前端文件例子:
~~~
<el-table-column label="创建时间" prop="createTime" >
......
</el-table-column>
~~~
*****
### viewType
这个属性决定表格页及表单页使用什么UI组件.可选值:text、textarea、enum、datetime,更多组件正在开发中......
定义例子:
`{"label":"创建时间","viewProperties":{"prop":"createTime"},"viewType":"dateTime"}`
生成对应前端文件例子:
~~~
<!-- 表头部分 -->
<el-table-column label="创建时间" prop="createTime" >
<template slot-scope="{row,$index}">
<span>{{ row.createtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<!-- 表单部分 -->
<el-form-item label="创建时间" >
<el-date-picker v-model="temp.createtime" type="datetime" placeholder="请选择创建时间" />
</el-form-item>
~~~
*****
### viewOptions
当viewType为enum类型时,则需提供选项内容,viewOptions就是定义这些选项.
定义例子:
```
{"label":"用户状态","searchType":"LIKE","viewType":"enum","viewOptions":{"normal":{"text":"正常","style":"success"},"hidden":{"text":"禁用","style":"danger"}}}
```
其中normal和hidden为具体可选的值,其对应的text为选项显示的文本,style为显示的样式.
生成对应前端文件例子:
~~~
<!-- 表头部分 -->
<el-table-column label="用户状态" >
<template slot-scope="{row,$index}">
<el-tag v-if="row.status == 'normal'" :type="success">
正常
</el-tag>
<el-tag v-if="row.status == 'hidden'" :type="danger">
禁用
</el-tag>
</template>
</el-table-column>
<!-- 表单部分 -->
<el-form-item label="用户状态" >
<el-select v-model="temp.status" class="filter-item" placeholder="请选择用户状态" >
<el-option v-for="item in statusOptions" :key="item.key" :label="item.displayName" :value="item.key" />
</el-select>
</el-form-item>
<!-- js部分 -->
const statusOptions = [
{ key: 'normal', displayName: '正常' },
{ key: 'hidden', displayName: '禁用' }
]
~~~
