ドロップダウンボックスおよびその他のコンポーネントをelementUIテーブルヘッダーに追加します

公式サイトでは直接ご利用いただけます

単純なヘッダーの場合は直接使用します。複合ヘッダーの場合は、複合ヘッダーの下にテンプレートを追加し、複合ヘッダーのコードを直接追加します。

<el-table-column prop="title" :label="title" align="center">
        <template slot-scope="scope" slot="header">
            <el-select size="mini"  v-model="selectArea" @change="selectAreaChange" placeholder="请选择">
              <el-option
                v-for="item in optionAreas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
           <el-select  size="mini"  v-model="selectYear" @change="selectYearChange" placeholder="请选择">
              <el-option
                v-for="item in optionYears"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
              <div class="titleDiv">xxx</div>
         
        </template>

        <el-table-column prop="all" label="xx" min-width="20%">
          <template slot-scope="scope">
            <span>{
   
   { scope.row.all }}</span>
          </template>
        </el-table-column>
      //省略其他代码
</el-table-column>

 

最終効果

おすすめ

転載: blog.csdn.net/CarryBest/article/details/90669135