vue项目用element-ui的select获取联动数据怎么写？

Question

业务场景是这样，选择付款项关联材料：

接口返回的数据是这样的，怎么选择items中的name后，把此条数据的item放在材料选项里：

这是弹框代码：

<!-- 添加/编辑预算内付款 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form class="small-space" :model="forms" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
                <el-form-item label="预算类别" label-width="80px">
                    <el-input v-model="catein" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="付款项" label-width="80px">
                    <el-select v-model="forms.payed_terms" placeholder="请选择付款项类别" style="width: 100%;">
                        <el-option v-for="item in typesContractData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="材料" label-width="80px">
                    <el-select placeholder="请选择材料" style="width: 100%;">
                        <el-option v-for="item in marterList" :key="item.id" :label="item.material_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="付款金额" label-width="80px">
                    <el-input v-model.number="forms.money" placeholder="请输入付款金额"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button :loading="submitLoading" v-if="dialogStatus === 'create'" type="primary" @click="addList">确 定</el-button>
                <el-button :loading="submitLoading" v-else type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>

这是获取接口函数，typesContractData是付款项的数组，marterList是材料的数组：

// 获取预算列表
            getBudget() {
                let params = { "access-token": this.access_token }
                budgetList(params).then(res => {
                    let data = res.data.items
                    for(var i = 0; i < data.length - 1; i++) {
                        this.typesContractData.push(data[i])
                        let datas = this.typesContractData[i].item
                        for(var g = 0; g < datas.length; g++) {
                            this.marterList.push(datas[g])
                        }
                    }
                    console.log(this.typesContractData)
                    console.log(this.marterList)
                }).catch(err => {
                    console.log(err)
                })
            }

想过用watch来监听付款项数据的改变来改变材料的数据，结果好像不行，因为是在一个接口数组里面。
感觉不难，但就是写不出来，还是对数据处理理解的不够深，求解决，蟹蟹！

---

还有[Vue warn]: Missing required prop: "value"这个错误是什么意思？

---

<el-form-item label="预算类别" label-width="80px">
    <el-select v-model="forms.payed_terms" @change="changeMethods(name)" placeholder="请选择预算类别" style="width: 100%;">
        <el-option v-for="item in typesContractData" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</el-form-item>
<el-form-item label="材料" label-width="80px">
    <el-select placeholder="请选择材料" style="width: 100%;">
        <el-option v-for="item in marterList" :key="item.id" :label="item.material_name" :value="item.id"></el-option>
    </el-select>
</el-form-item>

changeMethods(name) {
    var marterList = []
    items.map(e => {
        if(e.name = name) {
            marterList = e.item
        }
    })
},

Answer 1

下面的材料 随上面的select @change事件来改变

下面这个材料显示 就是最大数据

changeMethods (name) {
    var obj =[]   ///这个就是材料渲染的数据
     items.map(e=>{
        if(e.name = name){
         obj  =  e.item 
        }
    })
 }
 
 // 然后你的材料select渲染这个obj  就可以

不明白call我

Answer 2

你可以把全部数据获取到之后，存入一个变量。先遍历填充付款项的下拉框，再通过element的选择器change触发事件通过当前选项的下标到之前暂存的数据中找到相应的下级数据来填充材料选择器，如此类推填充下级选择器。这是比较笨的方法了。。。。

Answer 3

把这里的

<el-option v-for="item in typesContractData" :key="item.id" :label="item.name" :value="item.id"></el-option>

修改成

<el-option v-for="item in typesContractData" :key="item.id" :label="item.name" :value="item" value-key="item.id"  @change="handleChange"></el-option>

handleChange:function(){
    console.log(this.value);
     // 这里value 就是整个 对象了
    this.marterList = this.value.item.slice(0)
}

没实际运行，上面是大概思路，可以参考一下

Answer 4

@change事件

Answer 5

[Vue warn]: Missing required prop: "value" 这个错误是在类似 select 标签中，点击选择 等动作会导致 value 的变化， 因此似乎必须使用 v-model 绑定