主要通过设置 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