前端小技巧——element-ui table勾选、禁用、默认选中状态一键实现

2023-04-06 03:57:53

使用 Element-UI Table 实现多重勾选状态：指南

Element-UI Table 组件是 Vue.js 开发者用来构建交互式表格的强大工具。它提供了广泛的功能，包括勾选、禁用和默认选中。通过这种方式，你可以设计出能够满足特定需求的复杂表格。

勾选状态

勾选状态允许用户从表格中选择一行或多行。要实现此功能，请在表格的列配置中添加一个 "selection" 列，并将其类型属性设置为 "selection"。这将添加一个复选框，用户可以使用它来选择该行。

<el-table :data="tableData">
  <el-table-column type="selection" width="55"></el-table-column>
  ...
</el-table>

禁用状态

禁用状态可用于阻止用户与表格中的特定行交互。要禁用一行，请在表格数据中添加一个名为 "disabled" 的字段，并将其设置为 true。这将在该行的复选框上应用禁用状态，用户无法将其选中。

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30, disabled: false },
        { name: 'Mary', age: 25, disabled: true },
        ...
      ]
    };
  }
};

默认选中状态

默认选中状态可用于在页面加载时预选表格中的特定行。要实现此功能，请在表格数据中添加一个名为 "defaultChecked" 的字段，并将其设置为 true。这将在该行的复选框上应用选中状态，用户不能取消选择该行。

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30, defaultChecked: false },
        { name: 'Mary', age: 25, defaultChecked: true },
        ...
      ]
    };
  }
};

代码示例

以下是一个完整的代码示例，展示了如何结合使用这三种状态：

<template>
  <el-table :data="tableData">
    <el-table-column type="selection" width="55"></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="disabled" label="禁用" width="80">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.disabled" disabled></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="defaultChecked" label="默认选中" width="120">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.defaultChecked" disabled></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 30,
          disabled: false,
          defaultChecked: false
        },
        {
          name: 'Mary',
          age: 25,
          disabled: true,
          defaultChecked: true
        },
        {
          name: 'Bob',
          age: 40,
          disabled: false,
          defaultChecked: false
        }
      ]
    };
  }
};
</script>