对于vue2和el-UI的部分问题的解决方式（一）

1. el-table的部分问题

1.1每行的点击事件的绑定

在el-UI的el-table组件的官方文档中，下方的table events中对table中的事件进行了书写。

要注意的是，在进行事件绑定时，要注意在事件前加@，如：

<el-table
    :data="tableData"
    style="width: 100%"
    @row-click="click1">

这样才能实现点击事件的绑定，但要注意的是@row-click=""中的方法中不需要携带参数，在table events中会告诉你执行对应事件时，el-table会传什么参数给方法，所以并不需要定义传给放法的参数，如：

click1(row, column, cell, event){
        alert(row.date);
        alert(column.label)
      }

实现的效果如下：

1.2给每行数据绑定删除按钮，实现删除功能

前一种方法是在点击table中某行数据时会出现的效果，它会根据你点击的位置返回不同的row和column的数据。但是在给每行绑定删除标签时，我是直接在el-table-item里面加了一个label="操作"

然后在里面添加的el-button组件。

<el-table-column label="操作" width="100">
    <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="handleDeleteChange(scope.$index)"
            >Delete</el-button
        >
    </template>
</el-table-column>

其中使用了作用域插槽slot-scope="scope"，这是为了将该行当数据传回给后端进行删除操作

这里介绍一下作用域插槽

//    作用域插槽
    Vue.component("todo-list",{
        inheritAttrs:false,
        props:{
            todos:[Array,Object]
        },
        template:
        `<ul>
            <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                  //这里的：data=“todo”就是讲子组件todo这个数据传给了父组件
                <slot :data="todo">{{todo.text}}</slot>//todo.text是默认值，父组件会把它覆盖掉
            </li>
         </ul>
        `
    });
<!--使用作用域插槽，通过slot-scope实现-->
<todo-list :todos="todos">
    <template slot-scope="slotProps">
        <span v-if="slotProps.data.isTrue">√</span>
        {{slotProps.data.text}}
    </template>
</todo-list>

如果想更了解插槽可以向这篇文章学习

https://blog.youkuaiyun.com/huangyilinnuli/article/details/119272944

使用的时候就是这样，从子组件传过来的名为data值为todo的数据将会被slot-scope接收，需要注意的是，slot-scope接收的是一个对象，这里命名为slotProps，也就是说你传过来的data将会作为slotProps的一个属性，所以需要slotProps.data才能调用到data。前面说了，data的值为todo，todo是什么呢？todo是todos遍历出来的，所以是一个对象。

要注意的是上面这篇文章是基于vue3写的。

因为我不会调用scope。。。。所以我使用的是如下的方法

<template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteChange(scope.$index)"
                  >Delete</el-button
                >
              </template>

这样可以获取到当前行当索引值，返回给点击事件的函数。使用插槽主要是因为一个组件被多次使用且每次使用时需要的内容又不同。