vue实现增、删、改
业务需求,前端实现增删改,不走接口
主页
<el-table :data="collectionPointList"
:header-cell-style="{ fontSize: '14px', height: '48px', padding: '0px', background: 'white', }"
:row-style="{ height: 56 + 'px' }" height="40%" ref="multipleTable" :row-class-name="rowClassName">
<template slot="empty">
<h-empty v-if="isEmpty(collectionPointList)" type="table" />
</template>
<el-table-column label="编码" align="left" prop="code" :show-overflow-tooltip="true" />
<el-table-column label="名称" align="left" prop="name" :show-overflow-tooltip="true" />
<el-table-column label="采集点标识" align="left" prop="point" :show-overflow-tooltip="true" />
<el-table-column label="业务标识位" align="left" prop="businessPoint">
<template slot-scope="scope">
<span>{{ scope.row.businessPoint == true ? "是" : "否" }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="100px"
class-name="small-padding fixed-width">
<template slot-scope="scope">
<h-button type="text" icon="hv-edit" @click="handelUpdate(scope.row)">修改
</h-button>
<h-button type="text" class="delete_button" style="color: #f56c6c"
@click="handleDelete(scope.$index)">删除
</h-button>
</template>
</el-table-column>
</el-table>
<h-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form1" :model="form1" :rules="rules" label-width="110px">
<el-form-item label="编码:" prop="code">
<el-input v-model="form1.code" placeholder="请输入编码" />
</el-form-item>
<el-form-item label="名称:" prop="name">
<el-input v-model="form1.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="采集点标识:" prop="point">
<el-input v-model="form1.point" placeholder="请输入采集点标识" />
</el-form-item>
<el-form-item label="业务标识位:" prop="businessPoint">
<el-switch v-model="form1.businessPoint" active-color="#13ce66">
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<h-button type="primary" @click="submitForm">确 定</h-button>
<h-button @click="cancel">取 消</h-button>
</div>
</h-dialog>
JS部分
新增、修改
handleAdd() {
this.form1 = {
businessPoint: true
}
this.title = "新增采集点"
this.open = true
},
handelUpdate(row) {
this.title = "修改采集点"
this.open = true
this.form1 = { ...row }
this.id = row.id
},
//获取当前的行数
rowClassName({ row, rowIndex }) {
//把每一行的索引放进row
row.id = rowIndex + 1;
},
submitForm() {
this.$refs["form1"].validate((valid) => {
if (valid) {
if (this.title === "新增采集点") {
let arrayCode
if (this.collectionPointList.length == 0) {
this.collectionPointList.push(this.form1)
this.open = false
} else {
//获取集合的编码
let listCodes = this.collectionPointList.map(item => item.code)
//判断表单中编码是否在集合中存在。此处判断,存在为true,不存在为false
arrayCode = listCodes.includes(this.form1.code)
//若不存在即添加
if (!arrayCode) {
this.collectionPointList.push(this.form1)
this.open = false
} else {
this.$modal.msgError("编码不可以重复")
}
}
} else {
let arrayCode
//获取集合的编码
let listCodes = this.collectionPointList.map(item => item.code)
//判断表单中编码是否在集合中存在。此处判断,存在为true,不存在为false
arrayCode = listCodes.includes(this.form1.code)
//若不存在即添加
if (!arrayCode) {
this.collectionPointList.forEach(element => {
if (element.id == this.id) {
element.code = this.form1.code
element.name = this.form1.name
element.point = this.form1.point
element.businessPoint = this.form1.businessPoint
}
})
this.open = false
} else {
this.$modal.msgError("编码不可以重复")
}
}
}
})
},
删除
//采集点删除
handleDelete(index) {
this.$modal.confirm('是否确认删除选中的数据项?').then(function () {
}).then(() => {
this.collectionPointList.splice(index, 1);
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},