W260426/10_vuecli/vueadmin/src/views/level/LevelList.vue

<template>
    <div class="levellist">
        <!-- 等级列表页面 -->
        <div class="level-content">
            <div class="btn-content">
                <el-button @click="goAddPage" type="primary">添加等级</el-button>
            </div>
            <div class="table-content">
                <!-- 表格 -->
                <template>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column label="序号" type="index" width="180"></el-table-column>
                        <el-table-column label="等级ID" prop="jrid"></el-table-column>
                        <el-table-column label="等级名称" prop="levelname"></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> -->
                                <template>
                                    <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="handleDelete(scope.row)">
                                        <el-button size="mini" type="danger" slot="reference">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
// 引入获取等级列表的方法 通过解构赋值接收相应的方法
import { getLevelList, deleteLevel } from '@/api/level'
export default {
    name: 'LevelList',
    data() {
        return {
            tableData: []
        }
    },
    // 生命周期函数 created 组件创建完成后调用
    // 尽量少的在生命周期函数内处理业务 如果业务比较复杂可以将业务封装成函数写在 methods 中 然后在生命周期函数中调用该函数
    created() {
        // 调用获取等级列表的方法
        this.getLevelHandle()
    },
    methods: {
        // 跳转添加等级页面
        goAddPage() {
            // 跳转添加等级页面
            this.$router.push('/level/leveladd')
        },
        // 获取等级函数
        getLevelHandle() {
            // 调用获取等级列表的方法
            getLevelList().then(res => {
                // 接收到数据后 赋值给 tableData
                console.log(res.data.records)
                this.tableData = res.data.records
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        // 删除等级函数
        handleDelete(row) {
            console.log(row.jrid, row.levelname);
            // 调用删除等级的方法
            deleteLevel([row.jrid]).then(res => {
                console.log(res.msg)
            })
        }
    }
}
</script>
<style scoped>
.level-content {
    margin: 40px 20px;
}
</style>