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;
  },
           

效果圖