表格内新增按钮功能

前端程序员杨青文

已于 2022-09-06 17:28:55 修改

阅读量589

点赞数

文章标签：前端

于 2022-07-07 11:29:07 首次发布

本文链接：https://blog.csdn.net/yqw13989575652/article/details/125655720

版权

<el-form>   
    <div class="btnTool">
        <el-button
                   size="mini"
                   type="primary"
                   class="greenButton"
                   @click="newlyIncreased"
                   >新增</el-button
            >
    </div>
</el-form> 
<!-- 新增弹窗 -->
<el-dialog
           :visible.sync="dialogFormVisible"
           width="936px"
           top="35vh"
           @close="shut"
           :close-on-click-modal="false"
           >
    <template #title>
		<div class="titleZise"><span>铁路线路信息</span></div>
    </template>
    <div style="height: 193px" class="railway">
        <el-form :model="form1" :rules="rules" ref="ruleForms">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="铁路名称:" prop="railwayLineName">
                        <el-input
                                  size="small"
                                  v-model="form1.railwayLineName"
                                  autocomplete="off"
                                  placeholder="请输入内容"
                                  ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="铁路类型" prop="railwayType">
                        <el-select
                                   size="small"
                                   v-model="form1.railwayType"
                                   placeholder="请选择"
                                   clearable
                                   >
                            <el-option
                                       v-for="(item, index) in railwayTypeList"
                                       :key="index"
                                       :label="item.name"
                                       :value="item.code"
                                       >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="newlyAdded">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
</el-dialog>
data(){
	return{
		url: {
			inquiry: "/bRailwayLine/list", //电气化铁路查询接口
			addModify: "/bRailwayLine/saveOrUpdate", //新增修改按钮接口
		}，
		row: {},
		tableData1:{},
		total1:{},
		dialogFormVisible: false,
        form1: {
            railwayLineName: "",
            railwayType: "",
        },
		rules: {
            railwayLineName: [
              { required: true, message: "请输入铁路名称", trigger: "blur" },
            ],
            railwayType: [
              { required: true, message: "请选择铁路类型", trigger: "change" },
            ],
      	},
		//查询参数
        queryParameters: {
            page: 1,
            limit: 10,
            id: undefined, //电铁线路编号
            railwayLineName: undefined, //电铁线路名称
            railwayType: undefined, //铁路类型
        },
	}
},
created() {
    this.queryList();
},
methods:{
	//查询列表
    queryList() {
      https(this.url.inquiry, this.queryParameters).then((res) => {
        this.tableData1 = res.data.list;
        this.total1 = res.data.total;
      });
    },
	//新增dialog关闭时的回调
    shut() {
      this.dialogFormVisible = false;
    },
	//新增按钮确定事件
    newlyAdded() {
      this.$refs.ruleForms.validate((valid) => {
        if (valid) {
          https(this.url.addModify, this.form1).then((res) => {
            if (res.success != true) {
              return this.$message.error("新增失败！");
            }
            this.$message.success("新增成功！");
            this.dialogFormVisible = false;
            //调用列表查询方法
            this.queryList();
          });
        } else {
          return false;
        }
      });
    },
	//新增按钮事件
	newlyIncreased() {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.ruleForms.resetFields();
      });
    },
}

<style lang="scss" scoped>
    .greenButton {
        background-color: #0d867f;
        width: 80px;
        color: white;
    }
    .greenButton:hover {
        background-color: rgb(110, 182, 178);
        color: white;
        border: none;
    }
    #resetButton {
        color: #000;
        width: 80px;
    }
    #resetButton:hover {
        background-color: white;
    }
    .railway {
        margin-top: 40px;
    }
    .titleZise {
        background-color: RGB(247, 247, 247);
        height: 46px;
        span {
            line-height: 46px;
            font-size: 16px;
            color: #666666;
            font-weight: 700;
            margin-left: 20px;
            font-style: normal;
            border-width: 0px;
            font-family: "思源黑体 CN Bold", "思源黑体 CN", sans-serif;
        }
    }
</style>