Vue2 前端表格必选项，禁止更改的实现

文章目录

[Vue2 前端表格必选项，禁止更改的实现](#Vue2 前端表格必选项，禁止更改的实现)
基本思路
- 基础表格实现
实现必选项并禁止更改
详细说明
进阶：添加禁用提示
总结

Vue2 前端表格必选项，禁止更改的实现

在前端开发中，表格是展示数据的重要方式。而在某些场景下，我们需要确保某些表格列是必选的且用户无法更改，避免数据的误操作。本文将深入讲解如何在 Vue2 中实现这一功能，包含多个详细的代码示例。

基本思路

数据绑定与选项控制： 我们通过 Vue.js 的 v-model 双向绑定来处理选中状态，将选中的行数据存储在一个变量中。
必选项的限制： 通过监听表格中的选项变化，判断用户是否试图取消某些必选项，如果是，则阻止这一行为，确保必选项不可更改。
禁用操作的实现： 通过设置 disabled 属性使得必选项无法取消，进一步增强用户体验。

基础表格实现

首先，我们构建一个简单的表格组件，使用 Vue2 的 el-table 来展示数据，同时使用 el-checkbox 来控制行的选中状态。

html 复制代码

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

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "John", age: 24 },
        { id: 2, name: "Tom", age: 26 },
        { id: 3, name: "Jane", age: 22 }
      ],
      selectedIds: [1], // 默认必选项
    };
  },
  methods: {
    handleSelectionChange(selectedRows) {
      this.selectedIds = selectedRows.map(row => row.id);
    }
  }
};
</script>

在这个示例中，我们使用了 el-table-column 的 type="selection" 属性，允许用户通过复选框选择行。handleSelectionChange 方法监听选中的行并更新 selectedIds。

实现必选项并禁止更改

为了实现某些行作为必选项且用户无法取消，我们可以借助 el-table 的 selectable 方法和 @select 事件来控制选择行为。以下是改进的代码示例：

html 复制代码

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="checkSelectable"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="Age"
        width="80"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "John", age: 24, mandatory: true },
        { id: 2, name: "Tom", age: 26, mandatory: false },
        { id: 3, name: "Jane", age: 22, mandatory: false }
      ],
      selectedIds: [1], // 必选项
    };
  },
  mounted() {
    // 初次加载时，确保必选项被选中
    this.$nextTick(() => {
      this.tableData.forEach(row => {
        if (row.mandatory) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      });
    });
  },
  methods: {
    checkSelectable(row) {
      return !row.mandatory; // 禁止取消必选项
    },
    handleSelectionChange(selectedRows) {
      this.selectedIds = selectedRows.map(row => row.id);
    }
  }
};
</script>

详细说明

必选项控制 (checkSelectable)：
el-table-column 提供了 selectable 属性，我们在其中检查每一行的 mandatory 字段，如果为 true，则禁用其取消选择的功能。checkSelectable 方法通过返回 false 来禁用用户取消选择。
初次加载时确保必选项被选中：

在 mounted 生命周期钩子中，使用 toggleRowSelection 方法强制选中所有 mandatory 为 true 的行。这确保了页面加载时必选项已被选中。
监听选项变化：

当用户改变选中项时，handleSelectionChange 会触发，并根据用户的选择更新 selectedIds，从而实时反映用户的选中状态。

进阶：添加禁用提示

为了提升用户体验，我们可以在用户试图取消必选项时显示提示信息。这可以通过在 checkSelectable 方法中进行额外逻辑处理来实现。

html 复制代码

<script>
checkSelectable(row) {
  if (row.mandatory) {
    this.$message({
      message: `Row "${row.name}" is mandatory and cannot be unselected.`,
      type: 'warning'
    });
    return false;
  }
  return true;
}
</script>

总结

本文展示了如何在 Vue2 中实现表格必选项并禁止用户更改。我们通过 el-table 的 selectable 方法和 toggleRowSelection 方法实现了对用户操作的控制，确保某些行不可取消。此外，我们还通过弹出提示增强了用户体验。在实际开发中，类似的功能可以广泛应用于需要确保特定数据状态的场景中。