element 表格中展示表单
编辑表格的内容，包含编辑头部及body的每行内容，以及增加行
<template>
<div>
<div>数据测试</div>
<div v-for="(item,index) in dataObj.data" :key="index">
<div>123 {{item.name}}</div>
<el-input v-model="item.name"></el-input>
<el-button @click="addLine(index)">新增行</el-button>
<el-table :data="item.data" style="width: 100%;margin-bottom:20px;">
<el-table-column v-for="(headerItem,headerIndex) in item.header"
:key="headerIndex" :prop="headerItem.prop" :label="headerItem.name">
<template #header>
<el-input size="mini" v-model.trim="headerItem.name"></el-input>
</template>
<template slot-scope="scope">
<el-input size="mini" v-model.trim="scope.row[headerItem.prop]">
</el-input>
</template>
</el-table-column>
</el-table>
</div>
<el-button @click="handleTest">test</el-button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
input: "",
dataObj: {},
};
},
watch: {},
mounted() {
let data1 = {
data: [
{
data: [
{
num: 12,
num1: 15,
name: "名称1",
quality: 20,
},
{
num: 12,
num1: 15,
name: "名称2",
quality: 20,
},
{
num: 12,
num1: 15,
name: "名称3",
quality: 20,
},
{
num: 12,
num1: 15,
name: "名称4",
quality: 20,
},
],
name: "名称1",
header: [
{
prop: "name",
name: "公司名称",
},
{
prop: "quality",
name: "用量",
},
{
prop: "num",
name: "数量",
},
{
prop: "num1",
name: "数量1",
},
],
},
{
data: [
{
num: 15,
num1: 15,
name2: "公司名称公司名称",
quality: 20,
},
{
num: 11,
num1: 15,
name2: "公司名称2",
quality: 25,
},
{
num: 12,
num1: 15,
name2: "公司名称3",
quality: 20,
},
{
num: 12,
num1: 15,
name2: "公司名称3",
quality: 20,
},
{
num: 12,
num1: 15,
name2: "公司名称3",
quality: 20,
},
{
num: 12,
num1: 15,
name2: "公司名称3",
quality: 20,
},
{
num: 12,
num1: 15,
name2: "公司名称3",
quality: 20,
},
],
name: "名称2",
header: [
{
prop: "name2",
name: "公司名称2",
},
{
prop: "quality",
name: "用量",
},
{
prop: "num",
name: "数量",
},
{
prop: "num1",
name: "数量1",
},
],
},
],
};
this.dataObj = data1;
},
methods: {
handleTest() {
console.log(this.dataObj);
},
addLine(index){
let obj ={}
console.log(this.dataObj.data[index].header)
this.dataObj.data[index].header.forEach(item => {
obj[item.prop] = ""
});
console.log(obj)
this.dataObj.data[index].data.push(obj)
}
},
watch:{
dataObj:{
handler(val){
console.log(val)
},
deep:true
}
}
};
</script>
<style>
</style>本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2024-04-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读