ElementUI 复用-elementui表格复选框

在Element UI中，实现表格复选框的复用是一个常见的需求。通常情况下，我们希望能够在多个页面或组件中使用相同的表格复选框逻辑，而无需重复编写代码。为了解决这个问题，我们可以采用组件化的方式，将表格和复选框的功能封装成一个独立的组件，并且通过props传递数据，使得这个组件可以在不同的地方被复用。

解决方案

组件化封装

我们将表格和复选框的功能封装到一个名为ReusableTable的组件中。在这个组件中，我们会定义表格的数据源、列配置以及复选框的选择逻辑。然后，我们可以通过props来接收外部传入的数据和其他配置项，从而实现组件的复用。

事件处理

为了让父组件能够监听子组件中的选择变化，我们需要在ReusableTable组件中触发自定义事件（如selection-change），并将选中的行数据传递给父组件。这样，父组件就可以根据需要对选中的行进行操作。

具体实现

以下是具体的代码实现：

vue
<!-- ReusableTable.vue -->

  
    
    
    
    
  
</p>


export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection);
    }
  }
}


<p>

在父组件中使用这个可复用的表格组件时，可以这样做：

vue

  <div>
    
    <p>Selected items:</p>
    <ul>
      <li>{{ item.name }}</li>
    </ul>
  </div>
</p>


import ReusableTable from './ReusableTable.vue';

export default {
  components: {
    ReusableTable
  },
  data() {
    return {
      data: [
        { name: 'Tom', age: 20 },
        { name: 'Jerry', age: 22 },
        // ...其他数据
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ],
      selectedItems: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedItems = selection;
    }
  }
};


<p>