vue 增删改数据实时更新

最新推荐文章于 2025-04-01 13:46:33 发布

原创

最新推荐文章于 2025-04-01 13:46:33 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了一个使用Vue.js实现的表格组件，通过定时器每5秒调用API获取并过滤用户数据，同时提供了搜索和编辑、删除功能。

设置一个定时器，执行findall


<template>
  <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      stripe
      style="width: 100%">
    <el-table-column
        label="ID"
        prop="id">
    </el-table-column>
    <el-table-column
        label="Name"
        prop="username">
    </el-table-column>
    <el-table-column
        label="权限"
        prop="roles[0].nameZh">
    </el-table-column>
    <el-table-column
        align="right">
      <template #header>
        <el-input
            v-model="search"
            size