element-ui 自定义表头，头部下拉框选中，对 table 中该列进行批量修改

主要通过设置 Scoped slot 来自定义表头，效果图如下：

自定义表头：

自定义案例：

<el-table-column>
    // 自定义表头
    <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
    </template>
    // 表格内容
    <template slot-scope="scope">
        
    </template>
</el-table-column>

点击表头的倒三角，出现下拉框选项：

<el-dropdown trigger="click" @command="handleCommand2">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="item in jobs"
      :key="item.id" :command="item.label">
      {{item.label}}
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

1.在trigger属性设置为click，可以点击触发。

2.通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。

3.el-dropdown-item 属性： command，其类型为string/number/object（解决循环 el-dropdown-item）

4.el-dropdown 事件：@command 事件主要将下拉框中的值，复制到 table 列表中（批量修改）

handleCommand (command){
  this.tableData.forEach(element => {
    element.unit = command
  })
},

addOaUser点击事件：

点击‘提交’按钮后，将 tableData 中的 checked，由 false 设为 true 。

动态绑定 table 列表中的下拉框和按钮是否禁止点击：

:type="scope.row.checked == true?'info': 'primary'"  :disabled="scope.row.checked == true"

完整案例：

<div style="border: 1px solid rgba(153, 153, 153, 0.1);border-bottom: none;">
  <el-table ref="multipleTable" :data="tableData" style="width: 100%" size="mini" @selection-change="handleSelectionChangeUsers">
    ......
    <el-table-column prop="job" label="职务">
      <!-- 自定义表头 -->
      <template slot="header" slot-scope="scope">
        <el-dropdown trigger="click" @command="handleCommand2" size="mini">
          <span>
            职务<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in jobs"
              :key="item.id" :command="item.label">
              {{item.label}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template slot-scope="scope">
          <el-select v-model="scope.row.job" value-key="id" placeholder="请选择职务" size="mini" clearable :disabled="scope.row.checked == true">
            <el-option
              v-for="item in jobs"
              :key="item.id"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </template>
    </el-table-column>
    <el-table-column label="sad" width="80">
      <!-- 自定义表头 -->
      <template slot="header" slot-scope="scope">
        <el-button type="primary" size="mini" @click="addOaUser()">提交</el-button>
      </template>
      <template slot-scope="scope">
      	<el-button :type="scope.row.checked == true?'info': 'primary'" size="mini" :disabled="scope.row.checked == true" @click="addOaUser(scope.row)">提交</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

除了使用上述的插槽来自定义之外，我们还可以使用 render-header