element-UI中的prop问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
表单中的prop(校验)
element中的form提供了表单验证功能,只需要通过rules属性传入约定的验证规则,并将form-item中的prop属性设置成需校验的字段名即可。
代码如下:
<el-form
ref="editForm"
:model="editForm"
:rules="editFormRules"
class="system-form"
label-width="120px">
<el-form-item
label="设备名称:"
prop="equipName">//校验的字段
<el-input
v-model="editForm.equipName" // 需要校验的字段
auto-complete="off"/>
</el-form-item>
<el-form-item
label="设备编码:"
prop="equipCode">
<el-input
v-model="editForm.equipCode"
auto-complete="off"/>
</el-form-item>
</el-form>
如上所示,el-form-item元素的prop属性绑定字段名,就会验证el-input双向绑定的变量是否符合验证规则。
表格中的prop(对应数据)
当el-table元素中注入data对象数组后,在el-table-column中的prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。
代码如下:
<el-table
:data="equipmentData"
stripe
class="system-table"
height="calc(100% - 170px)"
>
<el-table-column
width="180"
prop="equipName" // 对应数据
label="设备名称"/> // 定义列名
<el-table-column
prop="equipCode"
label="设备编码"/>
......
<el-table-column
label="操作"
width="150">
<template slot-scope="scope">
<el-button
size="small"
@click="handleEdit(scope.row)">编辑</el-button>
<el-button
size="small"
type="danger"
@click="removeData(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:8 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
更多推荐
所有评论(0)