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)

        表格绑定动态数据





第一:调用方法获取数据

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中的数据



    3:删除数据

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

你可能感兴趣的:(vue.js,前端,javascript)