<template> <div class="bidsInfo"> <el-table ref="singleTable" :data="noticeData" highlight-current-row style=" 100%;margin-top:40px;"> <el-table-column type="index" label="序号" width="50"> </el-table-column> <el-table-column property="title" label="标题"> <template slot-scope="scope"> <span style="cursor: pointer;">{{scope.row.title}}</span> </template> </el-table-column> <el-table-column property="hytype" width="160" align="center"> <template #header> 类型 <el-select v-model="typeVal" placeholder="请选择"> <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> </el-table-column> <el-table-column property="date" label="日期" width="120"> </el-table-column> </el-table> </div> </template> <script> export default { name: 'bidsInfo', data() { return { typeVal: "all", typeOptions: [{ value: 'all', label: '全部' }, { value: 'engineering', label: '工程' }, { value: 'goods', label: '货物' }, { value: 'service', label: '服务' }, { value: 'other', label: '其他' }], noticeData: [{ date: '2016-05-02', hytype: "工程", title: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', hytype: "工程", title: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', hytype: "工程", title: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', hytype: "工程", title: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-02', hytype: "工程", title: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', hytype: "工程", title: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', hytype: "工程", title: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', hytype: "工程", title: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-02', hytype: "工程", title: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', hytype: "工程", title: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', hytype: "工程", title: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', hytype: "工程", title: '上海市普陀区金沙江路 1516 弄' }], } } }; </script>
element 官网上el-table上使用插槽 slot=“header”来实现自定义表头,在表头中使用el-select组件选择不同的状态,无法展示选择后的状态,将slot=“header” 改成#header ,就可以了
参考博客https://blog.csdn.net/weixin_43899935/article/details/105137626