el-table 在表头中嵌入input框

可以在表头中使用 `scoped-slot`，在 `scoped-slot` 中使用 `el-input` 组件来实现在表头中嵌入 `input` 框。

示例代码如下：

<el-table :data="tableData">
  <el-table-column label="姓名">
    <template slot-scope="scope">
      <el-input v-model="searchName" placeholder="请输入姓名"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

在上述示例中，我们在表头中的姓名列中使用了 `scoped-slot`，并在 `scoped-slot` 中使用了 `el-input` 组件。注意，我们需要将 `v-model` 绑定到一个变量（例如 `searchName`），以便在搜索时获取 `input` 框中的值。

相关问题

el-table 中嵌入el-input

在el-table中嵌入el-input的方法如下：
1. 首先，确保你已经安装了element-ui@2.12.0以及el-table-infinite-scroll插件。
2. 在el-table的列定义中，使用scoped slot来自定义每个单元格的内容。例如，你可以在<template>标签中添加一个slot来嵌入el-input组件。

示例代码如下：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" placeholder="请输入姓名"></el-input>
    </template>
  </el-table-column>
</el-table>

在这个示例代码中，我们在el-table的列定义中添加了一个scoped slot，通过v-model绑定了输入框的值到tableData中的name字段。

这样，当表格打开时，输入框会回显数据并且可以进行修改。你可以根据需要进一步自定义el-input的属性和事件来实现更多功能。

另外，如果你想要在当前行聚焦时进行文本的编辑或下拉框的选择，你可以使用highlight-current-row这个样式，并设置el-table的highlight-current-row属性为true。 这样，当你点击某一行时，该行会被高亮显示，你可以在这个状态下进行编辑或选择操作。

希望这些信息对你有帮助！如果你还有其他问题，请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-table-infinite-scroll:El-Table无限滚动](https://download.csdn.net/download/weixin_42131861/19079535)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [el-table中嵌入el-input无法输入](https://blog.csdn.net/weixin_46410488/article/details/130961364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [el-table嵌入输入框](https://blog.csdn.net/weixin_59213769/article/details/128672090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

在el-table的表头中加入勾选框判断有哪些表头勾选

可以通过以下步骤在 el-table 的表头中加入勾选框并判断哪些表头被勾选：

1. 在 el-table 的表头中添加一个列，用于显示勾选框，如下所示：

<el-table-column type="selection" width="55"></el-table-column>

2. 使用 v-model 绑定一个数组来存储被选中的表头的 key，如下所示：

<el-table
  :data="tableData"
  :header-cell-style="{background: '#f7f7f7'}"
  @selection-change="handleSelectionChange"
  v-loading="loading"
  :border="true"
  :show-header="true"
  :header-row-style="{'font-weight': 'bold'}"
  :header-cell-style="{background: '#f7f7f7'}"
  v-model="selectedColumns"
>
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="姓名" width="120"></el-table-column>
  <el-table-column prop="age" label="年龄" width="120"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市朝阳区'
        },
        {
          name: '李四',
          age: 22,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 28,
          address: '广州市天河区'
        }
      ],
      loading: false,
      selectedColumns: []
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedColumns = selection.map(item => item.column.key)
      console.log(this.selectedColumns)
    }
  }
}

在上述代码中，我们使用 handleSelectionChange 方法来监听表头勾选状态的变化，当勾选状态发生变化时，将选中的表头的 key 存储在 selectedColumns 数组中，并打印到控制台中。