el-table 表头增加下拉选框

效果如下:
容积表
上代码:

    <el-table :data="tableData" height="600" style="margin-top: 10px;width: 100%;overflow: auto;float: left;">
          <el-table-column label="选择对比" align="center">
            <el-table-column label="" prop="title" align="left">
              <template slot-scope="scope" slot="header">
                <span>在用容积表(最大高度 {{ nowMostH }} mm):</span>
                <el-select v-model="optionIdn" size="mini" style="width: 180px;vertical-align:middle" @change="selectChangeNow">
                  <el-option v-for="item in optionVersionNow" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </template>
              <el-table-column label="H" prop="h"/>
              <el-table-column label="V在用" prop="v"/>
            </el-table-column>
            <el-table-column label="" prop="title" align="left">
              <template slot-scope="scope" slot="header">
                <span>平台容积表库:</span>
                <el-select v-model="optionIdb" size="mini" style="width: 150px;vertical-align:middle" @change="selectChangeBef">
                  <el-option v-for="item in optionVersionBef" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <span>(有效期:{{ valTime }})</span>
              </template>
              <el-table-column label="V版本库" prop="vb"/>
              <el-table-column label="V差值" prop="vbd"/>
            </el-table-column>
          </el-table-column>
        </el-table>

下拉框选择就会重新更新表格,注意:给表格绑定的数据tableData不能直接用来操作,会导致数据是正确的但不渲染表格。处理时应使用一个中间变量做处理,完成后赋值给tableData~~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值