vue 在div点击按钮后生成一个新的el-row里面带下拉框并按顺序插入每个新的el-row中有个按钮可以移除该行
您可以使用Vue的动态渲染功能来实现这个功能。首先,在Vue的数据中定义一个数组rows,用于存储每个el-row的数据。然后,在模板中使用v-for指令来渲染每个el-row,并动态绑定每个el-row的数据。在每个el-row中,可以使用v-if指令来判断是否需要显示下拉框和移除按钮。
下面是一个简单的示例代码:
<template>
<div>
<el-button @click="addRow">添加行</el-button>
<el-row v-for="(row, index) in rows" :key="index">
<el-col :span="8">
<el-select v-model="row.selectValue" placeholder="请选择">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-button @click="removeRow(index)">移除行</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
rows: [], // 存储每个el-row的数据
options: [ // 下拉框的选项
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
};
},
methods: {
addRow() {
// 在rows数组中添加一个新的el-row的数据
this.rows.push({
selectValue: ''
});
},
removeRow(index) {
// 在rows数组中移除指定索引的el-row的数据
this.rows.splice(index, 1);
}
}
};
</script>
在上面的代码中,点击“添加行”按钮会调用addRow方法,在rows数组中添加一个新的el-row的数据。然后,使用v-for指令渲染每个el-row,并根据row.selectValue的值来绑定下拉框的选中值。点击“移除行”按钮会调用removeRow方法,在rows数组中移除指定索引的el-row的数据
原文地址: https://www.cveoy.top/t/topic/imso 著作权归作者所有。请勿转载和采集!