elementui中select组件同时获取key与value

liam 8/26/2020 Vue

写这篇是因为我遇到了一个需求，当时需求是绑定的时候需要 changeNumber，但是下面一个组件得通过这里面 v-for 的那个数组里面的 id 来请求数据

    <el-select
        v-model="form.normBilling"
        ref="normBilling"
        @change="handleChangenormInfo"
        placeholder="请选择计费方式"
    >
        <el-option
            v-for="item in normBillingListDialog"
            :key="item.id"
            :label="item.name"
            :value="item.chargeNumber"
        ></el-option>
    </el-select>

1
2
3
4
5
6
7
8
9
10
11
12
13

标签有一个change的方法，在切换选项的时候触发，可以@change监听的方式，获取该标签v-model=””所绑定的值，但是这个方法只能获取选项的单一属性，假如你要同时获取该选项的value和key的话，可以在change绑定的方法中使用如下的函数：

handleChangenormInfo(value) {
    let choosenItem = this.normBillingListDialog.filter(item => item.chargeNumber === value)[0];
    let id = choosenItem.id;
    console.log(value, id, "111111");
    this.normBillingListDialogInfo = Object.assign({}, choosenItem);
}

1
2
3
4
5
6

item就是中循环遍历的数组，this.normBillingListDialog.filter()能过你选择的value值过滤出该选项的全部属性