请再修改一下上面的代码,要把上面的代码换成element-ui模型,并且使选择药品的框和输入药品数量的框还有删除按钮都在一行上面,更加美观一点。而且每次重新点开这个表单时药品名和输入药品的组合又重置为一行
时间: 2024-04-12 16:32:17 浏览: 104
element-ui表格数据转换的示例代码
当使用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" class="drug-row">
<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 type="number" v-model="drug.drugNumber" placeholder="请输入药品数量"></el-input>
<el-button @click="removeDrug(index)" type="danger">删除</el-button>
</div>
<el-button @click="addDrug">新增</el-button>
</div>
</template>
<script>
export default {
data() {
return {
drugs: [],
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);
}
},
mounted() {
this.addDrug();
}
};
</script>
<style scoped>
.drug-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
</style>
```
在上面的代码中,我们使用了Element UI的`el-select`、`el-option`和`el-input`组件来创建下拉框和输入框。按钮则使用了`el-button`组件。每次打开表单时,我们在`mounted`生命周期钩子函数中调用`addDrug`方法来初始化一个药品输入组合。
请确保已经正确引入Element UI库,并且已在Vue实例中导入所需的组件。此外,你还可以根据需要自行调整CSS样式以达到更好的美观效果。
阅读全文