在最近的项目中（基于vue），有一个需求就是通过 v-for 动态生成 input。在正常情况下，页面中的input数量是固定的，而且每个input绑定的v-model也是固定的，我们可以在 data 中设置。
现在input数量是根据接口返回的数据动态生成的，那么input的 v-model该怎么动态绑定呢？
<div class="checkbox" v-for="(list,index) in inputList"> <label class="radio-wrapper"> <input @change="handleSelect" type="radio" v-model="itemRadio[index]" :value="list.key" :name="list.variable">{{list.value}} </label> </div> ...... <script> ...... export default { data() { return { itemRadio: ['radio0','radio1','radio2'] } } ...... } </script>
核心：
- 创建一个空的数组
selectVal: []
- v-model绑定
v-model="selectVal[index].value"
- 动态生成v-modal
var len = 10;
for (var i = 0; i < len; i++) {
var item = {value: ''};
this.selectVal.push(item);
}
代码：
html部分 :
<div id="app">
<template>
<Row style="margin: 10px 50px;" v-for="(item,index) in 10">
<i-col span="4" style="padding-right:10px">
<i-select
v-model="selectVal[index].value"
filterable
remote
:remote-method="remoteMethod"
class="currentVal"
:current-val="selectVal[index].value"
:loading="loading">
<i-option v-for="(option, index) in options" :value="option.value"
:key="index">{{option.label}}</i-Option>
</i-select>
</i-col>
</Row>
</template>
<button @click="handleClick">get value</button>
</div>
js部分：
<script>
const app = new Vue({
el: '#app',
data: {
selectVal: [],
loading: false,
options: [],
list: [],
resultArr: []
},
created: function () {
var len = 10;
for (var i = 0; i < len; i++) {
var item = {value: ''};
this.selectVal.push(item);
}
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1).slice(0, 10);
}, 200);
} else {
this.options = [];
}
},
handleClick() {
let _this = this;
[].forEach.call(document.querySelectorAll(".currentVal"), function (item) {
if (item.getAttribute('current-val') != '') {
_this.resultArr.push(item.getAttribute('current-val'))
}
});
this.$Modal.info({title: '结果', content: this.resultArr});
}
},
mounted() {
var arr = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'];
this.list = arr;
}
})
</script>
作者：沧澈
链接：https://www.jianshu.com/p/4eda6a92bca4
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
ZERO----------
<table class="sub-table-box">
<tbody>
<tr v-for="(groupObj,index) in obj.groupList" v-bind:key="groupObj+1">
<td width="35%" align="left">{{groupObj.indexName}}</td>
<td width="65%">
<table class="sub-table">
<tbody>
<tr >
<td align="left" >
<el-radio-group v-model="selectVal[index].value">
<el-radio @click="handle()" v-for="indexObj in groupObj.indexList" v-bind:key="indexObj.indDesc" :label="indexObj.valueScore">{{ indexObj.indDesc }}</el-radio>
</el-radio-group>
<!--<input type="radio" :name="indexObj" v-bind:id="indexObj.indDesc" v-bind:value="indexObj.indDesc"><label v-bind:for="indexObj.indDesc" v-bind:value="indexObj.indDesc">{{indexObj.indDesc}}</label>-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
data () {
return {
tableData: [],
selectVal: [],
disabled: true,
value: '',
dataForm: {
serno: '',
allScore: '',
autoScore: '',
autoGrade: '',
adjustedScore: '',
adjustedGrade: '',
reason: ''
}
}
},
created: function () {
var len = 40
for (var i = 0; i < len; i++) {
var item = { value: 'radio' + i }
console.log(item)
this.selectVal.push(item)
}
console.log(this.selectVal)
},
页面：
<template>
<!--评级申请-信用等级评估页-->
<el-card shadow="never" class="aui-card--fill">
<div class="mod-customerRating__ccrappinfo}">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<h3 style="color: red">表格</h3>
</el-tooltip>
<div class="content-wrap">
<div class="table-wrap" style="width: 100%;">
<!--你先用这个-->
<table class="table-content">
<thead>
<tr class="tr_title">
<th width="6%">序号</th>
<th width="18%">组别</th>
<th width="6%">权重</th>
<th width="22%">指标</th>
<th width="40%">选项/指标值</th>
</tr>
</thead>
<tbody>
<!----右侧不带input输入框的2列的情况下 如序号2和8的---->
<template v-for="obj in tableData">
<tr v-if="obj.seqNo == '1' || obj.seqNo == '2' || obj.seqNo == '3' || obj.seqNo == '8'" v-bind:key="obj+1">
<td width="6%" align="center">{{obj.seqNo}}</td>
<td width="15%" align="center">{{obj.groupName}}</td>
<td width="6%" align="center">{{obj.weight}}</td>
<td width="74%" colspan="3">
<table class="sub-table-box">
<tbody>
<tr v-for="(groupObj,index) in obj.groupList" v-bind:key="groupObj+1">
<td width="35%" align="left">{{groupObj.indexName}}</td>
<td width="65%">
<table class="sub-table">
<tbody>
<tr >
<td align="left" >
<el-radio-group v-model="selectVal[index].value">
<el-radio @click="handle()" v-for="indexObj in groupObj.indexList" v-bind:key="indexObj.indDesc" :label="indexObj.valueScore">{{ indexObj.indDesc }}</el-radio>
</el-radio-group>
<!--<input type="radio" :name="indexObj" v-bind:id="indexObj.indDesc" v-bind:value="indexObj.indDesc"><label v-bind:for="indexObj.indDesc" v-bind:value="indexObj.indDesc">{{indexObj.indDesc}}</label>-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--单纯加输入框的 如4-->
<tr v-if="obj.seqNo == '4' || obj.seqNo == '5' || obj.seqNo == '6' || obj.seqNo == '7'" v-bind:key="obj+1">
<td width="6%" align="center">{{obj.seqNo}}</td>
<td width="15%" align="center">{{obj.groupName}}</td>
<td width="6%" align="center">{{obj.weight}}</td>
<td width="74%" colspan="3">
<table class="sub-table-box">
<tbody>
<tr v-for="groupObj in obj.groupList" v-bind:key="groupObj+1">
<td width="35%" align="left">{{groupObj.indexName}}</td>
<td width="65%" align="left">
<table class="sub-table">
<tbody>
<tr v-for="indexObj in groupObj.indexList" v-bind:key="indexObj+1">
<td align="left">
<input type="text" name="" :value="indexObj.indDesc" class="hidden">
</td>
<td width="12%">
<input class="sub-table-box-input" type="text" name="" :value="indexObj.indDesc" size="3" disabled="disabled"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<h3 style="color: red">信用评级得分</h3>
</el-tooltip>
<el-form label-width="130px" :model="dataForm" ref="dataForm">
<el-row>
<el-col :span="12">
<el-form-item label="评级总分">
<el-input v-model="dataForm.allScore" disabled = "disabled"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="机评得分">
<el-input v-model="dataForm.autoScore" disabled = "disabled"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="机评等级">
<el-input v-model="dataForm.autoGrade" disabled = "disabled"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="客户经理调整得分">
<el-input v-model="dataForm.adjustedScore" disabled = "disabled"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="调整等级">
<el-input v-model="dataForm.adjustedGrade" disabled = "disabled"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="评级理由">
<el-input
type="textarea"
:rows="2"
disabled = "disabled"
placeholder="评级理由"
v-model="dataForm.reason">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-button @click="backAppInfo()" type="warning" plain>返回</el-button>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
export default {
name: 'ccrappinfo-creditRating',
data () {
return {
tableData: [],
selectVal: [],
disabled: true,
value: '',
dataForm: {
serno: '',
allScore: '',
autoScore: '',
autoGrade: '',
adjustedScore: '',
adjustedGrade: '',
reason: ''
}
}
},
components: {
mixinViewModule
},
activated () {
this.init(); this.getModelNo()
},
created: function () {
var len = 40
for (var i = 0; i < len; i++) {
var item = { value: 'radio' + i }
console.log(item)
this.selectVal.push(item)
}
console.log(this.selectVal)
},
// watch: {
// radio: function (newval, oldval) {
// console.log('当前应取到的值：' + newval, '这是之前的值：' + oldval)
// }
// },
methods: {
handle () {
console.log(11122222222222)
console.log('取到的值是' + this.radio)
},
// 加载页面时，根据modelno获取表格内数据,新增时从申请主表中传过来modelNo
// SELECT * from CCR_APP_INFO his LEFT join CCR_APP_DETAIL detail on his.SERNO = detail.SERNO where 1 = 1 and his.SERNO = 'SQ20192321461' and his.delflag = 0
getModelNo () {
// this.modelNo = this.$route.params.modelNo
this.modelNo = 'SQ2015041610'
this.$http.get(`/customerRating/indmodel/${this.modelNo}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.tableData = {
...this.tableData,
...res.data
}
console.log('res.data:' + res.data)
console.log('data:' + this.tableData)
}).catch(() => {})
},
init () {
this.dataForm.serno = this.$route.params.serno
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.getInfo()
})
},
// 获取信息
getInfo () {
console.log(this.dataForm.serno)
this.$http.get(`/customerRating/ccrappdetail/${this.dataForm.serno}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
// 回首页
backAppInfo () {
this.$router.push({ name: 'backAppInfo' })
},
// 返回
backStep () {
this.$router.go(-1)
}
}
}
</script>
<style lang="scss">
.table-wrap{
width: 100%;
table{
border: 1px solid rgba(24, 144, 255, 0.2);
width: 100%;
border-spacing: 0;
border-collapse: collapse;
thead{
border-bottom: 1px solid rgba(24, 144, 255, 0.2);
tr {
border-bottom: 1px solid rgba(24, 144, 255, 0.2);
th{
background-color: rgba(220, 231, 241, 0.4);
font-size: 14px;
line-height: 26px;
color: #333333;
height: 40px;
padding: 0;
border-right: 1px solid rgba(24, 144, 255, 0.2);
}
}
}
tbody{
tr {
border-bottom: 1px solid rgba(24, 144, 255, 0.2);
.sub-table-box-input{
width: 100%;
height: 26px;
line-height: 26px;
}
td{
.el-radio{
width: 100%;
margin: 4px 0 4px 30px;
}
border-right: 1px solid rgba(24, 144, 255, 0.2);
&:last-child{
border-right: none;
}
.sub-table-box {
border: none;
tbody{
tr:last-child{
border-bottom: none;
}
}
.sub-table{
border: none;
tbody{
tr{
td{
border: none;
height: 26px;
line-height: 26px;
}
}
}
}
}
}
}
}
}
}
</style>
2024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
