element的el-table表格自定义表头,slot="header"内,数据不更新的问题

<template>
  <div class="bidsInfo">
    <el-table ref="singleTable" :data="noticeData" highlight-current-row style="width: 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

posted @ 2020-07-21 16:21  只争朝夕,不负韶华  阅读(7126)  评论(0编辑  收藏  举报