1：首先是表格中的prop（绑定data中对应的属性值数据）
当el-table元素中注入绑定data对象数组后，在el-table-column中的prop属性来绑定对应对象中的键名即可填入数据，用label属性则可以用来定义表格相应的列名。
相关代码如下：
data(){
return(){
resultData: [],
}
}
<el-table
:data="resultData"
:header-cell-style="{
'text-align': 'center',
background: '#eee',
color: '#606266',
height: '80px',
fontSize: '15px',
color: 'black',
fontWeight: 550
}"
max-height="440"
:cell-style="{ 'text-align': 'center' }"
stripe
style="width: 100%"
>
<el-table-column fixed type="index" label="序号" width="100">
<template scope="scope">
<span>{{ (bigPage.page - 1) * bigPage.limit + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="orgName" label="供电单位" width="140"></el-table-column>
<el-table-column
prop="timeFlag"
label="日原因/月原因"
width="120"
:formatter="timeFlagFormatter"
></el-table-column>
<el-table-column
prop="preasCode"
label="异常原因大类"
width="150"
:formatter="preasCodeFormatter"
></el-table-column>
<el-table-column
prop="reasCode"
label="异常原因小类"
width="250"
:formatter="reasCodeFormatter"
></el-table-column>
<el-table-column prop="reasDesc" label="异常原因" width="150"></el-table-column>
<el-table-column
prop="repCode"
label="处理方法/整改措施"
width="250"
:formatter="repCodeFormatter"
></el-table-column>
<el-table-column prop="repFlag" label="处理结果" width="120" :formatter="repFlagFormatter"></el-table-column>
<el-table-column prop="operName" label="录入人" width="120">
<template slot-scope="{ row }">
{{ row.operName || '--' }}
</template>
</el-table-column>
<el-table-column prop="createTime" label="录入时间" width="120"> </el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="handleEdit(scope.$index, scope.row)"
style="color: #048b78; font-weight: bolder"
>编辑
</el-button>
<el-button @click="deleteRecord(scope.row)" type="text" size="small" style="color: red; font-weight: bolder"
>删除
</el-button>
</template>
</el-table-column>
</el-table>2：可用作绑定Form 表单的校验问题（表单中的prop（校验））
element-ui中的form提供了表单验证功能，只需要通过rules属性传入约定的验证规则，并将form-item中的prop属性设置成需校验的字段名即可。
代码如下：
data() {
return {
rules: {
orgName: [{ required: true, message: '请选择供电单位', trigger: 'change' }],
timeFlag: [{ required: true, message: '请选择日日原因/月原因', trigger: 'blur' }],
preasCode: [{ required: true, message: '请选择异常原因大类', trigger: 'change' }],
reasCode: [{ required: true, message: '请选择异常原因小类', trigger: 'change' }],
repCode: [{ required: true, message: '请选择处理方法', trigger: 'change' }],
reasDesc: [{ required: true, message: '请输入异常原因', trigger: 'change' }]
},
} <el-form>
<el-dialog :title="title" :visible.sync="dialogEdit" width="60%">
<el-form
:inline="true"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
>
<div class="message">
<strong>基本信息</strong>
</div>
<el-form-item label="供电单位" prop="orgName">
<el-select clearable v-model="ruleForm.orgName" placeholder="请选择供电单位">
<el-option label="国网AA供电公司" value="01"></el-option>
<el-option label="国网BB供电公司" value="02"></el-option>
<el-option label="国网CC供电公司" value="03"></el-option>
<el-option label="国网DD供电公司" value="04"></el-option>
<el-option label="国网EE供电公司" value="05"></el-option>
</el-select>
</el-form-item>
<template>
<el-form-item prop="timeFlag" label="日原因/月原因:" style="margin-left: 10px">
<el-radio v-model="ruleForm.timeFlag" label="0">日</el-radio>
<el-radio v-model="ruleForm.timeFlag" label="1">月</el-radio>
</el-form-item>
</template>
<el-form-item label="异常原因大类" class="pReasCode" style="margin-left: 0px" prop="preasCode">
<el-select clearable v-model="ruleForm.preasCode" placeholder="请选择">
<el-option label="档案原因" value="01"></el-option>
<el-option label="计量原因" value="02"></el-option>
<el-option label="采集原因" value="03"></el-option>
<el-option label="窃电及违约用电因素" value="04"></el-option>
<el-option label="技术因素" value="05"></el-option>
</el-select>
</el-form-item>
<el-form-item label="异常原因小类" prop="reasCode">
<el-select clearable v-model="ruleForm.reasCode" placeholder="请选择" class="smallRecord">
<el-option label="台区总表电流互感器档案倍率与现场不一致" value="01"></el-option>
<el-option label="台区内经互感器接入用户的系统档案中倍率错误" value="02"></el-option>
<el-option label="用户计量点档案与现场不一致" value="03"></el-option>
<el-option label="台区档案不完整" value="04"></el-option>
<el-option label="台户关系不一致" value="05"></el-option>
<el-option label="流程归档不同步" value="06"></el-option>
<el-option label="其它" value="07"></el-option>
</el-select>
</el-form-item>
<el-form-item label="处理方法" prop="repCode">
<el-select clearable v-model="ruleForm.repCode" placeholder="请选择">
<el-option label="根据现场情况更改系统公变档案信息" value="01"></el-option>
<el-option label="更改二次回路接线方式" value="02"></el-option>
<el-option label="更换互感器及公变终端元件" value="03"></el-option>
<el-option label="根据负荷适当调整变化" value="04"></el-option>
<el-option label="线路负荷切割平衡三相负荷" value="05"></el-option>
<el-option label="及时安装投运公变终端" value="06"></el-option>
<el-option label="根据现场情况更改系统用户档案信息" value="07"></el-option>
<el-option label="更正用户错误接线方式" value="08"></el-option>
<el-option label="更换故障配件或整个故障装置" value="09"></el-option>
</el-select>
</el-form-item>
<!-- //录入人-->
<el-form-item label="录入人">
<el-input v-model="ruleForm.operName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="异常原因" prop="reasDesc" class="reasDescTop">
<el-input type="textarea" :rows="5" :cols="74" v-model="ruleForm.reasDesc"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</el-form>element-ui 官方也是这样写的：
文章来源地址https://www.toymoban.com/news/detail-505911.html文章来源：https://www.toymoban.com/news/detail-505911.html
到了这里，关于element-ui中的prop 的相关作用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
