el-table表头加入筛选功能

VIP文章 Monop

已于 2022-04-26 11:25:44 修改

阅读量6.6k

点赞数 2

文章标签： vue.js elementui javascript

于 2022-04-26 10:06:03 首次发布

本文链接：https://blog.csdn.net/m0_53251830/article/details/124419947

版权

可以通过输入框输入，也可以通过遍历过滤出来的数据进行选择，选择的单选值回填到输入框中，

表格组件：

<template>
  <el-table :data="formTable.tableData">
    <el-table-column :prop="item1.paramName" v-for="item1 in tableHeader" :key="item1.paramName" :label="item1.title" sortable>
        <!-- 表头部分数据【开始】 -->
        <template slot="header" scope-scope="scope">
            <!-- 表头字段名字 -->
            <span class="starName">
                {
  { item1.title }}
            </span>
            <!-- 表头过滤组件 -->
            <thSelectHeader
                :property="item1.paramName"
                :checkList="checkList"
                @selectChange="selectChange"
                @