标签：vue resp vm 查询 scope 列表 data id row

查询、删除代码如下;

<template>
  <div class="login-box">
    <el-table :data="tableData"  border>
      <el-table-column align="center" label="id"  width="140">
        <template v-slot="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名"  width="140">
        <template v-slot="scope">
          {{scope.row.uname}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="密码"  width="140">
        <template v-slot="scope">
          {{scope.row.pwd}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="邮箱" width="140">
        <template v-slot="scope">
          {{scope.row.email}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="电话号码"  width="140">
        <template v-slot="scope">
          {{scope.row.phone}}
        </template>
      </el-table-column>

      <el-table-column  label="Actions" align="center"  width="230" class-name="small-padding  fixed-width">
        <template v-slot="scope">
          <el-button type="primary" size="mini">
            编辑
          </el-button>
          <el-button type="mini" size="danger" @click="deluser(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    export default {
        name: "user-lists",
      data(){
          return{
            tableData:[]
          }
      },
      created(){
          this.fetchData()
      },
      methods:{
        fetchData(){
          var vm=this;
          this.$axios({
            method:'get',
            url:'http://localhost:8080/user/selectUserList'
          }).then(function (resp) {
            vm.tableData=resp.data;
          });

        },
        deluser(id){
          var vm=this;
          this.$axios({
            method:'GET',
            url:'http://localhost:8080/user/deleteUser?id='+id

          }).then(function (resp) {
           /* vm.tableData=resp.data*/
           console.log(resp.data);
           if(resp.data=="success"){
             vm.$message({
               message:'删除成功',
               type:'success'
             });
           /*  vm.$router.push("/UserLists")*/
             vm.fetchData();//更新数据
           }
          }).catch(function (error) {
            vm.$message.error('错了');
          });
        }
      }
    }
</script>

<style scoped>

</style>

标签：vue,resp,vm,查询,scope,列表,data,id,row
来源： https://www.cnblogs.com/wyxjava/p/15680596.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。