18.职位修改操作

选择组件并添加

el-dialog标签

<template>
    <div>
        <el-input
                size="small"
                class="addPosInput"
                placeholder="添加职位..."
                prefix-icon="el-icon-plus"
                v-model="pos.name">
        </el-input>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addPosition()">添加
        </el-button>
        <div class="posManaMain">

            <el-table
                    :data="positions"
                    stripe
                    size="small"
                    border
                    style="width: 70%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="职位名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <!--scope.$index:当前操作到第几行 scope.row：这一行对应的json对象 -->
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
                title="修改职位"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-tag>职位名称</el-tag>
                <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

使用的时候先保证dialog对话框是隐藏的 (dialog)dialog
所以dialogVisible：false初始化赋值为false

<script>
    export default {
        name: "PosMana",
        data(){
            return{
                pos:{
                    name:''
                },
                updatePos:{
                    name:''
                },
                dialogVisible:false,
                positions:[]
            }
        },

在组件里面有两个按钮 分别是取消和确定 给与对应的事件

  <el-button size="small" @click="dialogVisible = false">取 消</el-button>
  <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>

取消:直接将dialog设置成false 不显示
确 定:走doUpdate 方法

通过axios发送更新请求 如果成功 返回数据的话
1 重新加载
2 将对话框中的name设置为初始值’’
3 将dialog对话框隐藏

 methods:{
            doUpdate(){
                this.putRequest("/system/basic/pos/",this.updatePos).then(resp=>{
                    if (resp) {
                        this.initPositions();
                        this.updatePos.name='';
                        this.dialogVisible=false;
                    }
                })
            },

把对话框显示出来

  //定义编辑按钮的方法
  handleEdit(index, data) {
      this.updatePos=data;
      this.dialogVisible=true;
  },

效果图