el-table 删除及兄弟组件传值进行查看

 

         记录后台管理系统中表格删除一行数据并调用接口操作

         以及通过兄弟组件传值操作在另一个页面对部分数据进行查看

 

一、表格样式

 

二、删除步骤

 

1.操作部分代码

代码如下（示例）：

<el-table :data="allArticle" border style="width: 100%" class="artileTable">
    <el-table-column prop="status" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteArticle(scope.$index,scope.row.id)"> 删除 </el-button>
            <el-button size="mini" type="primary" @click="toEdit(scope.row.content,scope.row.id,scope.row.title)"> 编辑 </el-button>
          </template>
</el-table-column>
</el-table>

 通过点击事件传入有关数据

 

2.点击事件

代码如下（示例）：

deleteArticle(val,rowId){
      this.allArticle.splice(val,1);//页面删除一行效果
      this.totalPage=this.totalPage-1;
      let articleId=rowId;
      console.log(articleId);
      //调用接口
      ReqDeleteArticle({id:articleId}).then((res)=>{
        console.log(res)
        if(res.msg="成功") {
          
          this.$message({
            showClose:true,
            message:'删除成功', 
            type:"success"
          })
        }
        else{
          this.$message({
            showClose:true,
            message:"删除失败",
            type:'warning'
          })
        }
      })
     
    }  

三、兄弟组件传值

 

1.新建文件

 

在组件中新建.js文件，并在文件中写入：

import Vue from 'vue'
export default new Vue

 

 2.引入

在需要传递数据的页面中引入该文件

import article from '@/components/student/article.js';

 

 3.传递

通过 js文件名.$emit将所获取到的数据存储到所设置的content1中

toEdit(content){
      
     
      article.$emit('content1', content);
     
    },

 

 4.接收

通过 js文件名.$on将content1中的数据赋值给content2

article.$on('content1',  (content) =>{
      
      this.content2=content;
      
      console.log(this.content2)
      
    });