zoukankan      html  css  js  c++  java
  • element的el-table表格自定义表头,slot="header"内,数据不更新的问题

    <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

  • 相关阅读:
    关于windows CE Platform Builder中模拟器的限制
    送给每天都用电脑的人
    用eVC4开发SmartPhone、Pocket PC程序之 开发工具下载、安装、配置
    在手机上显示图片
    如何禁止回车的使用
    弹出窗口的方法
    Request.Form同Request.querystring的区别.txt
    找前几天
    手机上可移动的图片
    httphandler是做什么的?
  • 原文地址:https://www.cnblogs.com/aidixie/p/13355754.html
Copyright © 2011-2022 走看看