vue不调接口给表格手动增加 编辑 删除数据(自看)

需求:不调用接口给表格增加编辑删除数据,最后保存提交整个表单的时候统一调接口

在vue3的系统里写的vue2,代码稍微有些不同

 

 父组件表格代码


<template>
  <div>
	<el-button
		size="small"
		@click="addInterfaceSyncLogDetailsRow"
		type="primary"
		style="margin-bottom: 10px"
	>
		新增
	</el-button>
	<el-table
		class="table"
		size="small"
		:data="ruleForm.interfaceSyncLogDetailsDTOList.filter(function(item){ return item.delFlag !== '1'})"
		style="width: 100%"
	>
		<el-table-column
			prop="qsxm"
			header-align="center"
			align="center"
			show-overflow-tooltip
			label="亲属姓名"
		></el-table-column>
		<el-table-column
			prop="sfzjh"
			header-align="center"
			align="center"
			show-overflow-tooltip
			label="身份证件号"
		></el-table-column>
		<el-table-column
			prop="xb"
			header-align="center"
			align="center"
			show-overflow-tooltip
			label="性别"
		></el-table-column>
		<el-table-column fixed="right" label="操作" width="150">
			<template #default="scope">
				<el-button @click="viewInterfaceSyncLogDetailsRow(scope.row)" link size="small">
					查看
				</el-button>
				<el-button @click="editInterfaceSyncLogDetailsRow(scope.row)" link size="small">
					编辑
				</el-button>
				<el-button @click="delInterfaceSyncLogDetailsRow(scope.row)" link size="small">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

    <InterfaceSyncLogDetailsForm
      ref="interfaceSyncLogDetailsForm"
      @addRow="saveInterfaceSyncLogDetailsRow"
    ></InterfaceSyncLogDetailsForm>
  </div>
</template>

<script>
import InterfaceSyncLogDetailsForm from './InterfaceSyncLogDetailsForm'
export default {
  name: 'Pc2BuildDia',
  components: {
    InterfaceSyncLogDetailsForm
  },
  data() {
    return {
      ruleForm: {
        interfaceSyncLogDetailsDTOList: []
      },
    }
  },
 methods: {
     // 新增
    addInterfaceSyncLogDetailsRow() {
      this.$refs.interfaceSyncLogDetailsForm.init('add')
    },
    // 查看
    viewInterfaceSyncLogDetailsRow(child) {
      this.$refs.interfaceSyncLogDetailsForm.init('view', child)
    },
    // 编辑
    editInterfaceSyncLogDetailsRow(child) {
      this.$refs.interfaceSyncLogDetailsForm.init('edit', child)
    },
    // 删除
    delInterfaceSyncLogDetailsRow(child) {
      this.ruleForm.interfaceSyncLogDetailsDTOList.forEach((item, index) => {
        if (item === child && item.id === '') {
          this.ruleForm.interfaceSyncLogDetailsDTOList.splice(index, 1)
        } else if (item === child) {
          item.delFlag = '1'
          this.ruleForm.interfaceSyncLogDetailsDTOList.splice(index, 1, item)
        }
      })
    },
    // 接收子组件传递的表单数据
    saveInterfaceSyncLogDetailsRow(child1, child2) {
      if (child1 === '') {
        this.ruleForm.interfaceSyncLogDetailsDTOList.push(child2)
      } else {
        this.ruleForm.interfaceSyncLogDetailsDTOList.forEach((item, index) => {
          if (item === child1) {
            this.ruleForm.interfaceSyncLogDetailsDTOList.splice(index, 1, child2)
          }
        })
      }
    }
  }
}

</script>

子组件表单代码

<template>
	<el-dialog :title="title" :close-on-click-modal="false" v-model="visible" v-if="this.visible">
		<el-form
			size="small"
			:model="inputForm"
			ref="inputForm"
			:class="method === 'view' ? 'readonly' : ''"
			:disabled="method === 'view'"
			@keyup.enter="doSubmit()"
			label-width="120px"
		>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item label="亲属姓名" prop="qsxm" :rules="[]">
						<el-input v-model="inputForm.qsxm"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="身份证件号" prop="sfzjh" :rules="[]">
						<el-input v-model="inputForm.sfzjh"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="xb" :rules="[]">
						<el-input v-model="inputForm.xb"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<span class="dialog-footer" style="float: right">
			<el-button size="small" v-if="method === 'add'" type="primary" @click="continueDoSubmit()">
				继续添加
			</el-button>
			<el-button size="small" @click="visible = false">关闭</el-button>
			<el-button size="small" v-if="method !== 'view'" type="primary" @click="doSubmit()">确定</el-button>
		</span>
	</el-dialog>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			method: '',
			visible: false,
			oldInputForm: '',
			inputForm: {
				id: '',
				qsxm: '',
				sfzjh: '',
				xb: ''
			}
		}
	},
	components: {},
	methods: {
		init(method, obj) {
			this.method = method
			if (method === 'add') {
				this.title = `新增`
			} else if (method === 'edit') {
				this.title = '修改'
			} else if (method === 'view') {
				this.title = '查看'
			}
			this.visible = true
			this.$nextTick(() => {
				this.$refs.inputForm.resetFields()
				this.inputForm.id = ''
				this.oldInputForm = ''
				if (method === 'edit' || method === 'view') {
					// 修改或者查看
					this.oldInputForm = obj
					this.inputForm = JSON.parse(JSON.stringify(obj))
				}
			})
		},
		// 添加
		doSubmit() {
			this.$refs['inputForm'].validate((valid) => {
				if (valid) {
					this.$emit('addRow', this.oldInputForm, JSON.parse(JSON.stringify(this.inputForm)))
					this.visible = false
				}
			})
		},
		// 继续添加
		continueDoSubmit() {
			this.$refs['inputForm'].validate((valid) => {
				if (valid) {
					this.$emit('addRow', this.oldInputForm, JSON.parse(JSON.stringify(this.inputForm)))
					this.$refs['inputForm'].resetFields()
				}
			})
		}
	}
}
</script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值