怎么能让element ui plus中的table在左侧插入和隐藏多选功能的列时，右侧数据不从新渲染

在 Element UI Plus 中的 Table 组件中，当左侧插入或隐藏多选功能的列时，右侧数据会重新渲染。这是因为 Table 组件的数据是通过 Props 传递的，当 Props 改变时，Vue 会重新渲染组件。

如果想要避免这种情况，可以通过以下两种方法来解决：

1. 使用 v-if 控制多选列的显示和隐藏，而不是使用 Table 组件自带的多选列功能。这样可以避免 Table 组件的数据重新渲染。

2. 在 Table 组件中使用 keep-alive 组件来缓存 Table 数据，这样在插入或隐藏多选列时，Table 数据不会重新渲染。具体的做法是在 Table 组件外层包裹一个 keep-alive 组件，并将 Table 组件作为子组件传递给 keep-alive 组件。同时，需要在 Table 组件中设置唯一的 key 值，确保每次重新渲染时都是同一个组件。

相关问题

element ui plus table 设置为多选

要将 Element UI 中的 Table 组件设置为多选，需要在 `<el-table>` 标签中设置 `@selection-change` 和 `@select` 事件处理函数，并且在 `<el-table-column>` 标签中设置 `type="selection"`。具体代码如下：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection"></el-table-column>
  <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>

export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市朝阳区'
        },
        {
          name: '李四',
          age: 20,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 22,
          address: '广州市天河区'
        }
      ],
      selectedRows: []
    }
  },
  methods: {
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows
    },
    handleDeleteSelectedRows() {
      // 删除选中的行
      // ...
    }
  }
}

在上面的代码中，`@selection-change` 事件处理函数会在用户选择或取消选择某一行数据时触发，将选中的行数据保存在 `selectedRows` 变量中。`handleDeleteSelectedRows` 方法用于删除选中的行数据。

element ui el-table中多选

在 Element UI 的 el-table 中实现多选功能，你可以使用 table 组件的 selection 属性来实现。下面是一个示例代码：

<template>
  <el-table
    :data="tableData"
    :selection="selection"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name">
    </el-table-column>
    <el-table-column
      prop="age"
      label="Age">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Address">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, address: '1234 Street' },
        { name: 'Jane', age: 25, address: '5678 Street' },
        { name: 'Tom', age: 30, address: '9876 Street' },
        { name: 'Alice', age: 35, address: '5432 Street' }
      ],
      selection: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selection = selection;
    }
  }
};
</script>

在上述代码中，我们通过添加一个类型为 "selection" 的 el-table-column 来显示多选框列。然后，我们使用 selection 属性绑定一个空数组，并通过 @selection-change 监听选择变化事件，在方法中更新 selection 数组的值。

这样，你就可以在 el-table 中实现多选功能了。当用户选择或取消选择行时，selection 数组会随之更新。你可以根据需要进一步处理选择的数据。