要实现elementui表格里面插入选择框,查了好久找到了这个方法,记录一下
效果图
代码
<el-table-column
prop="area_send_cnt"
label="总发送数量"
show-overflow-tooltip
align="center"
>
<!-- 类型标题的自定义插槽 -->
<template slot="header" slot-scope="scope">
<div class="custom-header">
<!-- 下拉框 -->
<el-select
v-model="typeFilter"
placeholder="总发送数量"
@change="handleTypeFilterChange"
>
<el-option label="总发送数量" value="0"></el-option>
<el-option label="越南语区" value="2"></el-option>
<el-option label="英语语区" value="3"></el-option>
<el-option label="中文语区" value="1"></el-option>
</el-select>
</div>
</template>
<!-- 自定义单元格内容 -->
<template slot-scope="scope">
<!-- 根据当前选择的类型展示对应地区的总发送数量 -->
<span v-if="typeFilter === '0'">{{
scope.row.area_send_cnt["0"]
}}</span>
<span v-if="typeFilter === '1'">{{
scope.row.area_send_cnt["1"]
}}</span>
<span v-else-if="typeFilter === '2'">{{
scope.row.area_send_cnt["2"]
}}</span>
<span v-else-if="typeFilter === '3'">{{
scope.row.area_send_cnt["3"]
}}</span>
</template>
</el-table-column>