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 官方也是这样写的：
![vue element-ui [Vue warn]: Invalid prop: custom validator check failed for prop “index“.](https://ucc.alicdn.com/pic/developer-ecology/68212b48a73a4e8ab369b9389cccee62.png?x-oss-process=image/format,webp/resize,h_160,m_lfit)
