按钮控制type="selection"选中

你可以使用JavaScript来控制type为"selection"的按钮被选中。以下是一个示例：

HTML代码：

<button type="selection" id="myButton">点击我</button>

JavaScript代码：

document.getElementById("myButton").click();

这将模拟用户点击按钮并将其选中。

相关问题

将表头单元格展示为复选框，行内单元格正常展示，不需要type="selection"的列，选中该列表的表头的复选框，点击删除列可以删除整列

为了实现这样的需求，你需要在HTML结构上稍作调整，移除默认的`type="selection"`列，并为表头添加独立的复选框。当用户选中表头的复选框时，可以借助JavaScript来控制行内数据的行为以及响应“删除列”按钮。以下是相应的代码实现：

<template>
  <div>
    <el-checkbox
      v-model="selectAll"
      @change="toggleSelectAll"
      :indeterminate="indeterminate"
      class="select-all-header"
    >
      全选
    </el-checkbox>

    <el-table :data="paramTableData" :style="{ width: '100%' }">
      <el-table-column
        prop=""
        label=""
        width="50"
        align="center"
        show-overflow-tooltip
        :formatter="formatCheckboxes"
      ></el-table-column>
      <el-table-column v-for="(item, index) in activeColumn" :key="item" :prop="item" :label="item">
        <template slot-scope="scope">
          <span>{{ scope.row[item] }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="deleteColumn(index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paramTableData: [], // 数据源
      activeColumn: [], // 表头配置
      selectAll: false,
      indeterminate: false, // 是否存在部分被选中的状态
      selectedItems: [], // 存储选中的列
    };
  },
  methods: {
    formatCheckboxes(row, column) {
      if (!column.prop) return;
      return `<input type="checkbox" v-model="row.${column.prop}" />`;
    },
    toggleSelectAll() {
      this.selectAll = !this.selectAll;
      this.indeterminate = false; // 清除非全选和全选以外的状态
      this.updateSelectedItems();
    },
    deleteColumn(index) {
      this.paramTableData.forEach((row) => {
        delete row[this.activeColumn[index]];
      });
      this.activeColumn.splice(index, 1); // 移除已选中的列
    },
    updateSelectedItems() {
      this.selectedItems = [];
      this.paramTableData.forEach((row) => {
        if (Object.keys(row).some((key) => row[key])) {
          this.selectedItems.push(key);
        }
      });
    },
  },
};
</script>

在这个例子中：
1. `formatCheckboxes`方法在行首插入一个复选框，其`v-model`关联到了对应的数据字段。
2. 表头的全选复选框控制了所有行的选中状态，通过`toggleSelectAll`方法更新所有行的选中状态并更新`selectedItems`。
3. “删除列”按钮触发`deleteColumn`方法，从数据源中移除指定列。
4. `updateSelectedItems`方法维护选中的列集合。

注意：由于复选框不是真正的表头列，因此在删除列时可能会导致数据结构发生变化。如果需要保持数据的完整性，可以根据实际需求调整这部分逻辑。

type selection 手动设置选中

### 如何在 `type=selection` 中手动设置选项为选中状态

在 Vue 和 Element Plus 组件库中，可以通过多种方式实现对表格复选框的手动控制。以下是详细的解决方案：

#### 1. 使用 `row-key` 和 `default-checked-keys`
为了支持跨分页保存已选中的行，需配置 `el-table` 的属性 `row-key` 并提供唯一的键值作为每一行的标识符。通过 `default-checked-keys` 设置默认选中的行 ID 列表。

<template>
  <el-table ref="tableRef" :data="tableData" @selection-change="handleSelectionChange" row-key="id">
    <el-table-column type="selection" reserve-selection />
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ],
      selectedRowKeys: [1], // 默认选中的行ID列表
    };
  },
  mounted() {
    this.$refs.tableRef.toggleRowSelection(this.getSelectedRows(), true);
  },
  methods: {
    handleSelectionChange(selection) {
      console.log('当前选中的行:', selection);
    },
    getSelectedRows() {
      return this.tableData.filter(row => this.selectedRowKeys.includes(row.id));
    }
  }
};
</script>

此代码片段展示了如何利用 `toggleRowSelection` 方法动态调整特定行的状态[^3]。

#### 2. 自定义逻辑筛选可选行
如果希望某些条件下的行不可被选择，则可以在 `checkSelectable` 函数里编写相应判断规则并绑定到 `selectable` 属性上。

// 定义方法用于决定哪些行允许勾选
methods: {
  checkSelectable(row) {
    return !this.isAdmin; // 假设 isAdmin 是布尔型变量表示管理员权限
  }
}

上述函数会依据业务需求返回布尔值从而影响最终呈现效果[^1]。

#### 3. 清除所有选中项或者单独取消某个项目的选择
当需要清空整个表格内的全部选定记录时，调用 API 提供的功能即可完成任务；而针对个别实例解除标记则需要用到更精确的操作手段——即定位目标对象后再执行反向动作。

对于 HTML 按钮来说，借助 jQuery 库可以帮助我们轻松达成目的：只需找到对应的 input[type='radio'] 元素并将它们的 checked 属性重置成 false 即可达到预期的效果[^4]。

然而，在基于框架开发的应用程序内部处理这类交互行为通常推荐采用官方文档建议的最佳实践路径而非直接操控 DOM 节点。因此回到我们的例子上来讲就是应该继续依赖于 el-table 所暴露出来的接口来进行管理而不是绕过它去修改底层结构。

---

### 总结
综上所述，要在带有 `type="selection"` 配置的 EL 表格组件当中实现自定义设定某几条目处于预先指定好的“已勾选”状况下显示出来的话，主要依靠以下几个方面的工作：
- 正确指派唯一标志给每一条数据以便后续追踪；
- 合理运用 framework 内建工具比如 toggleRowSelection 来触发更新视图的动作；
- 如果存在额外约束条件还需要附加合适的过滤器来限定范围。

最后记得测试各种边界情况确保功能稳定可靠！

---