element-UI中的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>

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

发布了13 篇原创文章 · 获赞 0 · 访问量 363

猜你喜欢

转载自blog.csdn.net/weixin_46074961/article/details/105514195