W260426/10_vuecli/vueadmin/src/views/address/AddressList.vue

<template>
    <div>
        <div class="table-content">
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="序号" type="index" width="180"></el-table-column>
                <el-table-column label="地址ID" prop="addressid"></el-table-column>
                <el-table-column label="地址名称" prop="addressname"></el-table-column>
                <el-table-column label="地址经度" prop="latitude"></el-table-column>
                <el-table-column label="地址纬度" prop="longitude"></el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(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 :disabled="false" size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { getAddressList, deleteAddress } from '@/api/address'
export default {
    name: 'AddressList',
    data() {
        return {
            tableData: []
        }
    },
    created() {
        this.getAddress()
    },
    methods: {
        // 获取地址列表
        getAddress(){
            getAddressList().then(res => {
                console.log(res.data.records)
                
                this.tableData = res.data.records
            })
        },
        // 删除地址
        handleDelete(row){
            // console.log(row)
            deleteAddress([row.addressid]).then((res)=>{
                console.log(res)
                // 删除成功 刷新地址列表
                this.getAddress()
                // 删除成功 提示用户
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
            })
        },
        // 编辑地址
        handleEdit(row){
            console.log(row)
            // 编辑地址 跳转编辑页面
            this.$router.push({
                path: '/address/addressadd',
                query: {
                    addressid: row.addressid,
                    addressname: row.addressname,
                    latitude: row.latitude,
                    longitude: row.longitude
                }
            })
        }
    }
}
</script>
<style scoped>
.table-content {
    padding: 30px;
}
</style>