vue element ui动态添加行、删除行、数据提交、回显字段有起q、至z、收取比例costRatio自动序号不作为字段提交q、z、costRatio不能为空
你可以通过使用Vue和Element UI的组件来实现动态添加行、删除行、数据提交和回显功能。下面是一个简单的示例代码:
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column label="起始值" prop="q">
<template slot-scope="scope">
<el-input v-model="scope.row.q" :disabled="isDisabled(scope.$index, 'q')"></el-input>
</template>
</el-table-column>
<el-table-column label="结束值" prop="z">
<template slot-scope="scope">
<el-input v-model="scope.row.z" :disabled="isDisabled(scope.$index, 'z')"></el-input>
</template>
</el-table-column>
<el-table-column label="收取比例" prop="costRatio">
<template slot-scope="scope">
<el-input v-model="scope.row.costRatio" :disabled="isDisabled(scope.$index, 'costRatio')"></el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="small" @click="removeRow(scope.$index)" :disabled="isDisabled(scope.$index, 'q')">删除</el-button>
</template>
<el-button size="small" @click="addRow">添加行</el-button>
<el-button size="small" @click="submitData">提交</el-button>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ q: '', z: '', costRatio: '' }
]
};
},
methods: {
addRow() {
this.tableData.push({ q: '', z: '', costRatio: '' });
},
removeRow(index) {
this.tableData.splice(index, 1);
},
submitData() {
// 提交数据的逻辑
},
isDisabled(index, prop) {
const row = this.tableData[index];
return !row.q || !row.z || !row.costRatio || prop === 'q' || prop === 'z' || prop === 'costRatio';
}
}
};
</script>
在上面的示例中,我们使用了el-table组件来展示数据表格,并通过v-model指令绑定每行的字段值。addRow方法用于动态添加行,removeRow方法用于删除行,submitData方法用于提交数据。isDisabled方法用于判断某个字段是否为空或是否为不允许提交的字段。
请注意,上述代码仅提供了基本的实现思路和示例,你需要根据具体需求进行修改和完善
原文地址: https://www.cveoy.top/t/topic/iPIA 著作权归作者所有。请勿转载和采集!