element-UI中的prop问题_elementui prop 表达式

表单中的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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

如上所示，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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29