element-plus表格数据增删改查

1.定义axios方法API

// 导入文件夹axios中的index.js配置文件
import axios from "~/axios";


// 获取公告信息
export function getNotice(page) {
    return axios.get(`/admin/notice/${page}`)//接口url
}


// 删除公告信息
export function removeNotice(id) {
    return axios.post(`/admin/notice/${id}/delete`)
}



// 修改公告信息
export function toNotice(id, data) {
    return axios.post("/admin/notice/" + id, data)
}



// 添加公告信息
export function addNotice(data) {
    return axios.post('/admin/notice',data)
}

2.获取数据，并渲染。

        element-plus表格(Table 表格 | Element Plus)

        表格绑定动态数据

<el-table :data="data" v-loading="loading">

</el-table>

第一：调用方法获取数据

import { ref, reactive,computed } from 'vue'
import { getNotice, removeNotice, addNotice,toNotice } from '~/api/notice.js'

const data = ref([]);

//调用axios方法
getNotice(currentPage.value).then((res) => {
        data.value = res.list
})

第二：
//表格内容提供prop渲染data中的数据

<el-table-column label="公告标题" prop="title" width="400"></el-table-column>
<el-table-column label="创建时间" prop="create_time">
</el-table-column>

    3：删除数据

        删除数据首先是获取删除数据的id