<template>
<el-dialog
class="ready-dialog"
title="table新增校验"
:visible="true"
:close-on-click-modal="false"
width="60%"
@close="$emit('closeDialog')"
>
<!-- 1. el-form包裹el-table -->
<el-form ref="formName" :model="form">
<el-table :data="form.reserveRechargeList" stripe border style="width: 100%" class="table-main">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column label="充值金额" prop="amount" align="center">
<template slot-scope="scope">
<!-- 2. 绑定prop和rules -->
<el-form-item
size="small"
:prop="'reserveRechargeList.' + scope.$index + '.amount'"
:rules="rules.amount"
>
<span v-if="!scope.row.disabled">{{scope.row.amount}}</span>
<el-input v-else v-model="scope.row.amount" placeholder="请输入充值金额" size="mini"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="充值供应商" prop="supplier" align="center">
<template slot-scope="scope">
<el-form-item
size="small"
:prop="'reserveRechargeList.' + scope.$index + '.supplier'"
:rules="rules.supplier"
>
<span v-if="!scope.row.disabled">{{scope.row.supplier}}</span>
<el-input v-else v-model="scope.row.supplier" placeholder="请输入充值供应商" size="mini"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="rechargeTime" label="充值时间" width="200" align="center">
<template slot-scope="scope">
<el-form-item
size="small"
:prop="'reserveRechargeList.' + scope.$index + '.rechargeTime'"
:rules="rules.rechargeTime"
>
<span v-if="!scope.row.disabled">{{scope.row.rechargeTime}}</span>
<el-date-picker
v-else
v-model="scope.row.rechargeTime"
type="datetime"
placeholder="选择充值时间"
style="width: 100%"
value-format="yyyy-MM-dd HH:mm:ss"
size="mini">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="operatorName" label="操作人" align="center" width="100"></el-table-column>
<el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-popconfirm
v-if="scope.row.disabled"
title="确定删除吗？"
placement="top"
@confirm="delete_list(scope)"
>
<el-button slot="reference" type="text" style="color: red;">删除</el-button>
</el-popconfirm>
<span v-else>-</span>
</template>
</el-table-column>
</el-table>
</el-form>
<div class="add-btn">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="add_list">新增</el-button>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('closeDialog')">取 消</el-button>
<el-button type="primary" @click="save">保 存</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'ReadyDialog',
props: {
modelValue: {
type: Object,
default: () => {}
}
},
watch: {
// 监听modelValue变化复制给当前绑定元素实现绑定
modelValue: {
immediate: true,
handler(val) {
this.form = val;
}
}
},
// 给modelValue绑定事件
model: {
prop: 'modelValue',
event: 'getValue'
},
data() {
return {
form: {
code: '',
name: '',
totalReserve: '',
usableReserve: '',
reserveRechargeList : []
},
rules: {
amount: [
{
required: true,
message: "请输入充值金额",
trigger: ["blur", "change"],
}
],
supplier: [
{
required: true,
message: "请输入充值供应商",
trigger: ["blur", "change"],
}
],
rechargeTime: [
{
required: true,
message: "请选择充值时间",
trigger: ["change"],
}
]
}
}
},
methods: {
// 新增表格
add_list() {
const user = JSON.parse(sessionStorage.getItem('user'))
this.form.reserveRechargeList.push({
amount: '',
createTime: '',
operatorName: user.nickname,
disabled: true,
rechargeTime: '',
supplier: ''
})
},
// 删除
delete_list({$index}) {
this.form.reserveRechargeList.splice($index, 1)
},
// 保存
save() {
// <!-- 3. 校验 -->
this.$refs['formName'].validate((valid) => {
if (valid) {
this.$emit('getValue', this.form)
this.$emit('save')
} else {
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.ready-ipt {
width: 220px;
margin: 20px 20px 20px 0;
}
.dialog-flex {
width: 100%;
display: flex;
align-items: center;
margin: 10px 0;
span {
margin-right: 20px;
}
}
.table-title {
margin-bottom: 20px;
&-tip {
color: red;
font-size: 12px;
}
}
.table-header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.add-btn {
width: 100%;
padding: 20px 0;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
}
</style>
<style lang="scss">
.ready-dialog {
.el-dialog__header {
border-bottom: 1px solid #eeeeee;
}
}
</style>
效果图
image.png
image.png
