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

<template>
    <div class="levellist">
        <!-- 等级列表页面 -->
        <div class="level-content">
            <div class="btn-content">
                <el-button 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="date"></el-table-column>
                        <el-table-column label="等级名称" prop="name"></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-table-column>
                    </el-table>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
// 引入获取等级列表的方法 通过解构赋值接收相应的方法
import { getLevelList } from '@/api/level'
export default {
    name: 'LevelList',
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }
            ]
        }
    },
    // 生命周期函数 created 组件创建完成后调用
    // 尽量少的在生命周期函数内处理业务 如果业务比较复杂可以将业务封装成函数写在 methods 中 然后在生命周期函数中调用该函数
    created() {
        // 调用获取等级列表的方法
        this.getLevelHandle()
    },
    methods: {
        // 获取等级函数
        getLevelHandle() {
            // 调用获取等级列表的方法
            getLevelList().then(res => {
                // 接收到数据后 赋值给 tableData
                this.tableData = res.data
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
}
</script>
<style scoped>
.level-content {
    margin: 40px 20px;
}
</style>