请把上面的代码换成element-ui模型再写一遍
时间: 2023-12-26 22:34:23 浏览: 86
当使用Element UI库时,你可以使用`el-select`和`el-input`组件来代替原生的select和input元素。同时,你可以使用`el-button`来创建按钮。下面是使用Element UI库实现的示例代码:
```html
<template>
<div>
<div v-for="(drug, index) in drugs" :key="drug.key">
<el-select v-model="drug.drugName" placeholder="请选择药品">
<el-option v-for="option in drugOptions" :key="option.id" :label="option.drugName" :value="option.drugName"></el-option>
</el-select>
<el-input v-model="drug.drugNumber" placeholder="请输入药品数量"></el-input>
<el-button @click="removeDrug(index)">删除</el-button>
</div>
<el-button @click="addDrug">新增</el-button>
</div>
</template>
<script>
export default {
data() {
return {
drugs: [
{
key: 1,
drugName: "",
drugNumber: ""
}
],
drugOptions: [
{
id: -493924350,
orderId: 64,
drugId: 1,
drugName: "999感冒灵",
drugNumber: 1
},
{
id: 1,
orderId: 64,
drugId: 2,
drugName: "云南白药",
drugNumber: 2
}
]
};
},
methods: {
addDrug() {
const newKey = this.drugs.length + 1;
this.drugs.push({
key: newKey,
drugName: "",
drugNumber: ""
});
},
removeDrug(index) {
this.drugs.splice(index, 1);
}
}
};
</script>
```
在上面的代码中,我们使用了Element UI的`el-select`、`el-option`和`el-input`组件来创建下拉框和输入框。按钮则使用了`el-button`组件。其余部分与之前的代码相同。
请确保已经正确引入Element UI库,并且已在Vue实例中导入所需的组件。
阅读全文