Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据（内容）

Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据（内容）

能够解决的问题

• 需要在表格中添加一个类似修改或编辑的按钮，按下按钮，弹出的窗口需要本行的渲染数据
• 需要向服务端提交一串含有 本行内容文本 的操作

效果

代码总览

<template>
  <div id="app">
    <el-table
      :data="studentsNewList"
      style="width:95%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="180">
      </el-table-column>
      <el-table-column
        prop="ctime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button  @click.native.prevent="getrows(scope.row)" type="warning" round>修改数据</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    export default {
      name: "demo1",
      data(){
        return{
          studentsNewList : [
            {id:1,name:'余强',sex:'男',ctime:2012},
            {id:2,name:'萧芳',sex:'女',ctime:2012},
            {id:3,name:'康敏',sex:'女',ctime:2012},
            {id:4,name:'吕丽',sex:'女',ctime:2012}
          ],
        }
      },
      methods:{
        getrows(row){
          console.log(row.id)
          console.log(row.name)
          console.log(row.sex)
        }
      }
    }
</script>

<style scoped>
</style>

关键点

<el-table-column label="操作">
    <template slot-scope="scope">
      <el-button  @click.native.prevent="getrows(scope.row)" type="warning" round>修改数据</el-button>
    </template>
</el-table-column>

1. 这里的按钮用 template标签 包起来，设置好 slot-scope属性 ，给要调用事件的按钮绑定点击事件

methods:{	// 这里直接将事件传入的参数当做对象，以原数组的属性名来调用数据
    getrows(row){
        console.log(row.id)
        console.log(row.name)
        console.log(row.sex)
    }
}

2. 在事件中以对象的方式去调用数据

studentsNewList : [			// 传入用于渲染表格的数组的数据格式
            {id:1,name:'余强',sex:'男',ctime:2012},
            {id:2,name:'萧芳',sex:'女',ctime:2012},
            {id:3,name:'康敏',sex:'女',ctime:2012},
            {id:4,name:'吕丽',sex:'女',ctime:2012}
]