el-table 焦点事件

el-table 提供了多种事件来处理焦点问题，其中包括：

- current-change：当表格的当前行改变时触发；
- select：当用户选择某一行时触发；
- row-click：当用户点击某一行时触发；
- cell-click：当用户点击某一单元格时触发。

你可以在这些事件的回调函数中处理焦点问题。例如，你可以在 current-change 事件中获取当前行的数据，然后根据这些数据来更新表单或者其它组件的状态。在 select、row-click、cell-click 事件中也可以实现类似的逻辑。

下面是一个示例代码，演示了如何在 el-table 中使用 current-change 事件来处理焦点问题：

<template>
  <div>
    <el-table :data="tableData" @current-change="handleCurrentChange">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
        { name: '赵六', age: 24, address: '深圳市' },
      ],
      form: {
        name: '',
        age: '',
        address: '',
      },
    };
  },
  methods: {
    handleCurrentChange(val) {
      if (val) {
        this.form.name = val.name;
        this.form.age = val.age;
        this.form.address = val.address;
      } else {
        this.form.name = '';
        this.form.age = '';
        this.form.address = '';
      }
    },
  },
};
</script>

在上面的代码中，我们在 el-table 中使用了 current-change 事件，在事件的回调函数中根据当前行的数据更新了表单的状态。这样用户在选择不同的行时，表单的内容就会随之改变。