您现在的位置是：首页 > 开发开发
badmin表单增加多列数组
谜团 2026-08-10 14:35:15【开发】人已围观
简介自定义组件：
新建路径\web\src\components\threeColumnInput，并在路径下创建index.vue，内容如下
<template> <div class="three-column-input"> <el-table :data="localDa
自定义组件：
新建路径\web\src\components\threeColumnInput，并在路径下创建index.vue，内容如下
需要几列就创建几列，json数据格式示例
"terms": [{
"col1": "5089161620588859390",
"col2": "方法灵活，调控得当，关注差异。",
"col3": "3"
},
{
"col1": "5089168761148149760",
"col2": "过程平稳，但缺乏弹性与个别关注。",
"col3": "2"
},
{
"col1": "5089169270517010432",
"col2": "方法单一，节奏不当，忽视差异。",
"col3": "1"
}]
使用方法示例：在业务页面使用<el-form-item ，而不是<FormItem
效果展示，如下“选项”，提交表单数据在terms，后台数据json格式，读取自动解析；
新建路径\web\src\components\threeColumnInput，并在路径下创建index.vue，内容如下
<template>
<div class="three-column-input">
<el-table :data="localData" border size="small" style="width: 100%">
<!-- 第一列 -->
<el-table-column :label="columns[0]" min-width="120">
<template #default="{ row }">
<!-- 增加 disabled 绑定 -->
<el-input v-model="row.col1" placeholder="请输入" clearable :disabled="readonlyCols.includes(0)" />
</template>
</el-table-column>
<!-- 第二列 -->
<el-table-column :label="columns[1]" min-width="120">
<template #default="{ row }">
<el-input v-model="row.col2" placeholder="请输入" clearable :disabled="readonlyCols.includes(1)" />
</template>
</el-table-column>
<!-- 第三列 -->
<el-table-column :label="columns[2]" min-width="120">
<template #default="{ row }">
<el-input v-model="row.col3" placeholder="请输入" clearable :disabled="readonlyCols.includes(2)" />
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column label="操作" width="80" align="center">
<template #default="{ $index }">
<el-button type="danger" link @click="removeRow($index)">
<el-icon><Delete /></el-icon>
</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-2">
<el-button type="primary" plain @click="addRow">
<el-icon><Plus /></el-icon> 添加一行
</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { Delete, Plus } from '@element-plus/icons-vue'; // 确保引入了图标
const props = withDefaults(defineProps<{
modelValue: Array<Record<string, any>>;
columns?: string[];
readonlyCols?: number[]; // 新增：接收需要禁用的列索引数组
}>(), {
columns: () => ['列1', '列2', '列3'],
readonlyCols: () => [], // 新增：默认为空数组（都不禁用）
});
// ... 其余的 watch、addRow、removeRow 逻辑保持不变 ...
const emit = defineEmits(['update:modelValue']);
const localData = ref(props.modelValue || []);
watch(() => props.modelValue, (newVal) => {
if (JSON.stringify(newVal) !== JSON.stringify(localData.value)) {
localData.value = newVal || [];
}
}, { deep: true });
const addRow = () => {
localData.value.push({ col1: '', col2: '', col3: '' });
emit('update:modelValue', localData.value);
};
const removeRow = (index: number) => {
localData.value.splice(index, 1);
emit('update:modelValue', localData.value);
};
watch(localData, (newVal) => {
emit('update:modelValue', newVal);
}, { deep: true });
</script>
<style scoped>
.three-column-input { width: 100%; }
</style>
"terms": [{
"col1": "5089161620588859390",
"col2": "方法灵活，调控得当，关注差异。",
"col3": "3"
},
{
"col1": "5089168761148149760",
"col2": "过程平稳，但缺乏弹性与个别关注。",
"col3": "2"
},
{
"col1": "5089169270517010432",
"col2": "方法单一，节奏不当，忽视差异。",
"col3": "1"
}]
使用方法示例：在业务页面使用<el-form-item ，而不是<FormItem
<FormItem v-if=false
:label="t('teaching.terms.terms_id')"
type="string"
v-model="baTable.form.items!.term_id"
prop="term_id"
:placeholder="t('Please input field', { field: t('teaching.terms.terms_id') })"
/>
<!-- 以下重点 -->
<!-- 以下重点 -->
<el-form-item :label="t('teaching.terms.terms')" prop="terms">
<ThreeColumnInput
v-model="baTable.form.items!.terms"
:columns="['ID(只读)', '描述', '分数']"
:readonly-cols="[0]"
/><!-- 只读设置:readonly-cols="[0, 2]" 0 代表第一列，2 代表第三列 -->
</el-form-item>
很赞哦！ ()
下一篇：返回列表
相关文章
-
无相关信息
