【Vue】el-table表头下拉筛选功能

实现效果如下

 

<template>
  <div class="logList-container">
    <el-card shadow="hover">
      <!-- tag标签 -->
      <el-tag
        :key="index"
        v-for="(item, index) in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(item)">
        <span>{{ item.name }}：</span>
        <span>{{ item.value }}</span>
      </el-tag>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        stripe
        style="width: 100%"
        :row-style="tableRowStyle"
      >
        <el-table-column align="center" label="序号" width="70">
          <template slot-scope="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="appId"
          min-width="50px"
          prop="xxx"
        >
          <template slot-scope="scope" slot="header">
            <span>xxx</span>
            <el-popover
              v-model="visible"
              placement="bottom"
              width=""
              trigger="click"
            >
              <el-select
                v-model="appidValue"
                clearable
                placeholder="请选择"
                @change="onChange"
              >
             
                <el-option
                  v-for="item in appIdList"
                  :key="item.key"
                  :label="item.key"
                  :value="item.key"
                ></el-option>
              </el-select>
              <div style="text-align: right; margin-top: 10px">
                <el-button
                  type="primary"
                  size="small"
                  @click="onPush('xxx', appidValue)"
                >
                  确定
                </el-button>
              </div>
              <i class="el-icon-arrow-down" slot="reference"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="xxx"
          min-width="50px"
          prop="apiCallName"
        >
          <template slot-scope="scope" slot="header">
            <span>xxx</span>
            <el-popover
              v-model="apiCallNameVisible"
              placement="bottom"
              width=""
              trigger="click"
            >
              <el-select
                v-model="apiName"
                clearable
                placeholder="请选择"
              >
               
                <el-option
                  v-for="item in apiCallNameList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
              <div style="text-align: right; margin-top: 10px">
                <el-button
                  type="primary"
                  size="small"
                  @click="onConfirm('xxx', apiName)"
                >
                  确定
                </el-button>
              </div>
              <i class="el-icon-arrow-down" slot="reference"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="xxx"
          min-width="50px"
          prop="apiCallPeriod"
        >
          <template slot-scope="scope" slot="header">
            <span>xxx</span>
            <el-popover
              v-model="apiCallPeriodVisible"
              placement="bottom"
              width=""
              trigger="click"
            >
              <el-select
                v-model="periodValue"
                clearable
                placeholder="请选择"
              >
          
                <el-option
                  v-for="item in apiCallPeriodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
              <div style="text-align: right; margin-top: 10px">
                <el-button
                  type="primary"
                  size="small"
                  @click="onPeriod('xxx', periodValue)"
                >
                  确定
                </el-button>
              </div>
              <i class="el-icon-arrow-down" slot="reference"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="xxx"
          prop="keyObjectValue"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'LogList',

    data() {
      return {
        form: {
          keyword: '',
        },
        dynamicTags: [], //tag数组
        appId: '',
        tableData: [
          {
            appId: '001',
            apiCallName: 'xxx',
            apiCallPeriod: 'xxx',
            keyObjectValue: '',
          },
        ], //列表数组
        currentPage: 1, //当前页码
        pageSize: 5, //每页条数
        total: 10,
        appIdList: [
          {
            value: '1',
            key: '001',
          },
         
        ],
        appidValue: '',
        visible: false,
        apiCallNameList: [
          {
            value: '1',
            label: '001',
          },
         
        ],
        apiName: '',
        apiCallNameVisible: false,
        apiCallPeriodList: [
          {
            value: '1',
            label: '第一阶段',
          },
        ],
        periodValue: '',
        apiCallPeriodVisible: false,
        cardNum: '',
        idCardVisible: false,
        resultNum: '',
        resultVisible: false,
        refldValue: '',
        refldVisible: false,
        startTimeVisible: false,
        endTimeVisible: false,
      }
    },
    watch: {},
    created() {},
    methods: {
 
      onPush(name, appidValue) {
        console.log(name)
        console.log(appidValue)
        if (appidValue == null || appidValue == '') {
          this.visible = false
          return
        } else {
          this.visible = false
          let index = this.dynamicTags.findIndex((item) => item.name == name)
          if (index > -1) {
            // 有就替换最后一项
            this.dynamicTags.splice(index, 1, {
              ['name']: name,
              ['value']: appidValue,
            })
          } else {
            // 数组里没有就新增这一项
            this.dynamicTags.push({ ['name']: name, ['value']: appidValue })
          }
          this.appidValue = ''
        }
      },

  
      onConfirm(name, apiName) {
        if (apiName == null) {
          this.apiCallNameVisible = false
          return
        } else {
          this.apiCallNameVisible = false
          // let isFlag = this.dynamicTags.some((item) => item.name == name)
          let index = this.dynamicTags.findIndex((item) => item.name == name)
          console.log(index)
          if (index > -1) {
            // 有就替换最后一项
            this.dynamicTags.splice(index, 1, {
              ['name']: name,
              ['value']: apiName,
            })
          } else {
            // 数组里没有就新增这一项
            this.dynamicTags.push({ ['name']: name, ['value']: apiName })
          }
          this.apiName = ''
        }
      },
   
      onPeriod(name, periodValue) {
        console.log(name)
        console.log(periodValue)
        if (periodValue == null) {
          this.apiCallPeriodVisible = false
          return
        } else {
          this.apiCallPeriodVisible = false
          // let isFlag = this.dynamicTags.some((item) => item.name == name)
          let index = this.dynamicTags.findIndex((item) => item.name == name)
          if (index > -1) {
            this.dynamicTags.splice(index, 1, {
              ['name']: name,
              ['value']: periodValue,
            })
          } else {
            this.dynamicTags.push({ ['name']: name, ['value']: periodValue })
          }
          this.periodValue = ''
        }
      },
   
      //关闭tag事件
      handleClose(tag) {
        console.log('tag', tag)
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      },
      onChange(val) {
        console.log('选中的值', val)
      },
      changeColr(result) {
        if (result == '成功') return '#43cf43'
        if (result == '失败') return 'red'
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
      },

      tableRowStyle() {
        return 'font-size:18px'
      },
    },
  }
</script>