vue 里的属性动态绑定

需求描述：根据后台返回数据动态构建table,每个table都是单选，互不干扰。实现方式概述：为每个单选框属性根据数组动态绑定属性。<div v-for="(item,i) in sheet"><div style="margin-top: 20px;margin-left: 10px;background: #6f7180" > <h5>结果{{i...

Slient-猿

5920人浏览 · 2019-06-23 11:24:26

Slient-猿 · 2019-06-23 11:24:26 发布

需求描述：根据后台返回数据动态构建table,每个table都是单选，互不干扰。
实现方式概述：为每个单选框属性根据数组动态绑定属性。

<div v-for="(item,i) in sheet">
 <div style="margin-top: 20px;margin-left: 10px;background: #6f7180" > <h5>结果{{i+1}}:{{item.input}}</h5> 
</div>
 <el-table ref="uuid" :data="item.hits" empty-text="当！"> <el-table-column label="" width="65">
 <template slot-scope="scope"> <el-radio :name=item.inputLine :label="scope.row.label" v-model="radioData[item.input]" @change.native="getTemplateRow($event,scope.$index,scope.row,item.input)"> </el-radio> </template> 
</el-table-column> <!--<el-table-column type="selection" width="40">--> <!--</el-table-column>-->
 <el-table-column prop="realProductId" label="sk"></el-table-column> </el-table-column> 
</el-table> 
</div>

因为每个table的单选框属性绑定是一样的，所以每个table之间的单选是互斥的。
多个table绑定不同的属性，故互不干扰。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^