W250913/10_vuecli/bankpro/src/views/level/LevelList.vue

<template>
    <div class="level-list">
        <!-- 等级添加按钮 -->
        <el-button type="primary" @click="goAddLevel">添加等级</el-button>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" width="200">
                </el-table-column>
                <el-table-column prop="jrid" label="等级ID">
                </el-table-column>
                <el-table-column prop="levelname" label="等级名称">
                </el-table-column>
                <el-table-column label="操作">
                    <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> -->
                        <el-popconfirm title="确定删除吗？" @onConfirm="deleteConfirm(scope.row)" confirm-button-text="确定删除">
                            <el-button slot="reference" size="mini" type="danger" >删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name: "LevelList",
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        // 点击删除气泡确定按钮
        deleteConfirm(row){
            // console.log('删除等级', index, row.jrid)
            let _id = row.jrid;
            // 发送请求删除等级
            axios.delete("http://39.105.160.25:18080/levelController/deleteLevel/",{
                data:[_id]
            } ).then( ()=> {
                this.$message({
                    message: '删除成功！',
                    type: 'success'
                });
                // 刷新等级列表
                this.getData()
            }).catch(err => {
                console.log(err)
            })
        },
        // 跳转等级添加页面
        goAddLevel() {
            this.$router.push("/level/add")
        },
        // 获取等级列表
        getData() {
            // 发送请求获取等级列表
            axios.get("http://39.105.160.25:18080/levelController/getLevel").then(res => {
                console.log(res.data.data.records)
                // 将返回的等级列表赋值给 tableData
                this.tableData = res.data.data.records
            })
        },
        // 编辑等级
        handleEdit(index, row) {
            console.log(index, row);
            this.$router.push({path:"/level/add",query:{id:row.jrid,levelname:row.levelname}})
        }
    },
    created() {
        // 组件创建时调用获取等级列表
        this.getData()
    }
}
</script>
<!-- scoped 表示样式只作用于当前组件 -->
<style scoped>
.level-list {
    padding: 20px;
}
</style>