element-ui中的prop 的相关作用

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 官方也是这样写的：