Vue Table Checkbox 交互：带提示的复选框和最大选择数限制

2023-11-08 12:15:14

前言

在 Vue.js 的表格中使用复选框非常常见，它允许用户选择一行或多行数据。为了提高用户体验，我们可以对复选框进行一些交互增强，例如在勾选时显示提示、在取消勾选时确认提示，以及设置最大可选择复选框数量的限制。

实现带提示的复选框

要实现带提示的复选框，可以使用 Vue.js 的 v-model 指令和 v-tooltip 指令。

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>名称</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.selected" @click="showTooltip(item)">
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'John Doe', age: 20, city: 'New York' },
      { id: 2, name: 'Jane Smith', age: 25, city: 'London' },
      { id: 3, name: 'Michael Jones', age: 30, city: 'Paris' }
    ]);

    const showTooltip = (item) => {
      // 显示提示
      console.log(`已选择：${item.name}`);
    };

    return {
      items,
      showTooltip
    };
  }
};
</script>

在上面的代码中，我们使用 v-model 指令将复选框的选中状态绑定到 item.selected 数据属性。当用户勾选或取消勾选复选框时，item.selected 的值会发生变化，并触发 showTooltip() 函数。

在 showTooltip() 函数中，我们使用 console.log() 输出一条提示信息，提示用户已选择或取消选择了哪一项数据。

实现取消勾选时确认提示

要实现取消勾选时确认提示，可以使用 Vue.js 的 @click 指令和 window.confirm() 函数。

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>名称</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.selected" @click="showTooltip(item)">
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'John Doe', age: 20, city: 'New York' },
      { id: 2, name: 'Jane Smith', age: 25, city: 'London' },
      { id: 3, name: 'Michael Jones', age: 30, city: 'Paris' }
    ]);

    const showTooltip = (item) => {
      // 显示提示
      console.log(`已选择：${item.name}`);
    };

    const confirmDeselect = (item) => {
      // 显示确认提示
      if (window.confirm('确认取消勾选？')) {
        // 取消勾选
        item.selected = false;
      }
    };

    return {
      items,
      showTooltip,
      confirmDeselect
    };
  }
};
</script>

在上面的代码中，我们使用 @click 指令为复选框添加了一个点击事件监听器。当用户点击复选框时，会触发 showTooltip() 函数和 confirmDeselect() 函数。

在 confirmDeselect() 函数中，我们使用 window.confirm() 函数显示一个确认提示。如果用户点击“确定”按钮，则取消勾选复选框；如果用户点击“取消”按钮，则不执行任何操作。

设置最大可选择复选框数量的限制

要设置最大可选择复选框数量的限制，可以使用 Vue.js 的 v-bind:disabled 指令和 maxSelected 数据属性。

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>名称</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.selected" :disabled="item.selectedCount >= maxSelected" @click="showTooltip(item)">
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'John Doe', age: 20, city: 'New York', selectedCount: 0 },
      { id: 2, name: 'Jane Smith', age: 25, city: 'London', selectedCount: 0 },
      { id: 3, name: 'Michael Jones', age: 30, city: 'Paris', selectedCount: 0 }
    ]);

    const maxSelected = ref(2);

    const showTooltip = (item) => {
      // 显示提示
      console.log(`已选择：${item.name}`);
    };

    const confirmDeselect = (item) => {
      // 显示确认提示
      if (window.confirm('确认取消勾选？')) {
        // 取消勾选
        item.selected = false;
      }
    };

    const updateSelectedCount = (item) => {
      // 更新已选择数量
      item.selectedCount = item.selected ? item.selectedCount + 1 : item.selectedCount - 1;
    };

    return {
      items,
      maxSelected,
      showTooltip,
      confirmDeselect,
      updateSelectedCount
    };
  }
};
</script>