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

  • 相关阅读:
    DATASTAGE中ODBC连接的配置
    DataStage 服务启动
    VS 安装部署项目自解压程序解压后按顺序执行多个程序
    DataStage系列教程 (Pivot_Enterprise 行列转换)
    [Leetcode] Binary tree-- 637. Average of Levels in Binary Tree
    [Leetcode] Binary tree -- 501. Find Mode in Binary Search Tree
    [Leetcode] Binary tree-- 606. Construct String from Binary Tree
    [Leetcode] DP-- 516. Longest Palindromic Subsequence
    [Leetcode] DP-- 638. Shopping Offers
    [Leetcode] DP-- 464. Can I Win
  • 原文地址:https://www.cnblogs.com/aidixie/p/13355754.html
Copyright © 2011-2022 走看看