elementui购物车表单如何取消选中

### ElementUI 购物车表单取消选中方法

在处理购物车功能时，通常会涉及到商品的选择状态管理。对于ElementUI中的表格组件（`el-table`），可以通过设置数据项的属性来控制每一行的选中状态。

为了实现取消选中某一行的功能，在定义表格的数据源时可以加入一个布尔类型的字段用于表示该条目是否被选中[^1]：

data() {
    return {
        tableData: [{
            id: '1',
            name: 'Item One',
            price: 9.9,
            selected: false // 初始未选中
        }, /* ... other items */],
    };
}

当需要编程方式改变特定记录的状态时，可以在事件处理器里修改对应对象的 `selected` 属性值，并通过调用 `this.$refs.table.clearSelection()` 来清除当前所有的选择，再单独指定要保持选中的项目:

<template>
  <div class="cart">
      <!-- 使用 :select-on-indeterminate 控制不确定状态下不自动全选 -->
      <el-table ref="table" :data="tableData" @selection-change="handleSelectionChange"
                style="width: 100%" :row-key="(row) => row.id">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="name" label="Name"></el-table-column>
          <el-table-column prop="price" label="Price"></el-table-column>

          <!-- 添加按钮触发取消选中逻辑 -->
          <el-button size="mini" @click="uncheckRow(item)">Uncheck</el-button>
      </el-table>
  </div>
</template>

<script>
export default {
  methods: {
      uncheckRow(row){
          this.$refs.table.toggleRowSelection(row, false);
      },
      
      handleSelectionChange(selection){
          console.log('Current selection:', selection);
      }
  }
};
</script>

上述代码展示了如何利用Vue.js结合ElementUI构建一个简单的购物车界面并提供了一个名为 `uncheckRow` 的函数用来取消某个具体项目的勾选项。这里的关键在于使用了 `$refs` 访问到 `<el-table>` 组件实例之后调用了其提供的 API 方法 `toggleRowSelection` 并传递参数 `(row, false)` 明确指定了目标行以及新的选中状态为否。