vue 增删改数据实时更新

设置一个定时器，执行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="mini"
            placeholder="输入姓名搜索"/>
      </template>
      <template #default="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import Add from './add.vue'
import PutUser from "./putUser.vue";
export default {
  name:'users',
  components:{
    PutUser,
    Add
  },
  data() {
    return {
      drawer: false,
      drawer2:false,
      uid:'',
      tableData: [],
      search: '',
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.drawer2=true;
      console.log(row.id);
      this.uid = row.id;
      console.log(this.uid)
    },
    handleDelete(index, row) {
      alert("确定删除吗？？")
      console.log(index, row);
      this.axios.delete("http://localhost:8989/users/"+row.id);
    },
    findAll(){
      this.axios.get('http://localhost:8989/users').then(res=>{
        this.tableData=res.data._embedded.users;
        console.log(this.tableData);
      })
    },
    // 这是一个定时器
    timer() {
      return setTimeout(()=>{
        this.findAll()
      },5000)
    }
  },
  watch: {
    tableData() {
      this.timer()
    }
  },
  destroyed() {
    clearTimeout(this.timer)
  },
  created() {
    this.findAll();
  }
}
</script>

<style>

</style>