• element-ui 解决 table 里包含表单验证的问题!


    直接上代码。

    <el-form :model="formData" :rules="formRules" ref="submitForm" label-width="108px" size="small" :disabled="formData.isExpired === 1">
    <el-form-item label="时段" >
    <span>{{dayObj.periodStartTime}}~{{dayObj.periodEndTime}}</span>
    </el-form-item>
    <el-form-item label="场地" prop="venueList">
    <el-select v-model="formData.venueList" multiple placeholder="请选择场地" >
    <el-option
    v-for="item in siteList"
    :key="item.venueId"
    :label="item.venueName"
    :value="item.venueId">
    </el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="价格" >
    <el-button type="primary" plain size="mini" @click="reset">重置</el-button>
    <div>
    <el-table :data="formData.priceList" id="out-table" >

    <el-table-column label="时间" prop="time" show-overflow-tooltip></el-table-column>
    <el-table-column label="原价" show-overflow-tooltip >
    <template slot-scope="scope">
    <el-form-item :prop="'priceList.' + scope.$index + '.originalPrice'" :rules='formRules.originalPrice'>
    <el-input v-model="scope.row.originalPrice" placeholder="" type="number"></el-input>
    </el-form-item>
    </template>

    </el-table-column>

    <el-table-column label="折扣价" show-overflow-tooltip >
    <template slot-scope="scope">
    <el-input v-model="scope.row.discountPrice" placeholder="" type="number" style="margin-bottom: 18px"></el-input>
    </template>
    </el-table-column>
    </el-table>
    </div>
    </el-form-item>
    </el-form>

    其实问题关键就在于如何给el-form-item动态绑定prop

              :prop="'tableData.' + scope.$index + '.字段名'"

  • 相关阅读:
    iOS 9之后Url链接的NSUTF8StringEncoding转码实现
    iOS实现应用更新及强制更新
    Objective-C代码简写
    Mac下使用数据库将Excel数据转换存入.plist
    iOS开发之图片压缩实现
    iOS键盘事件实现、控制
    iOS 轻击、触摸和手势的检测
    使用CocoaPods时遇到 Permission denied 问题
    2016-3-1 Mac下使用Hexo搭建Blog
    2016-3-1 安装Hexo过程中遇到的问题
  • 原文地址:https://www.cnblogs.com/blueball/p/10972321.html
Copyright © 2020-2023  润新知