element-ui表格的表头使用类似下拉框样式

最新推荐文章于 2024-09-24 08:37:02 发布

jiang-yibai

最新推荐文章于 2024-09-24 08:37:02 发布

阅读量4.8k

点赞数 3

分类专栏：记录文章标签： elementui 表头表格下拉框

本文链接：https://blog.csdn.net/qq_42376226/article/details/88144210

版权

记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录elementui表格中表头插入下拉小指标的方法.

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>表格</span>
      </div>
      <div class="content">
        <template>
          <el-table
            @selection-change="handleSelectionChangeUsers"
            :data="tableData"
            style="width: 100%">
            <el-table-column
              label="Date"
              prop="date">
            </el-table-column>
            <el-table-column
              label="Name"
              prop="name">
            </el-table-column>
            <el-table-column
              prop="flag"
              align="center">
              <template slot="header" slot-scope="scope">
                <el-dropdown trigger="click" @command="handleCommand" size="mini">
                  <span>
                    {{ tableTitle }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="item in jobs"
                      :key="item.id" :command="item.label">
                      {{item.label}}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '平安',
          name: '27%',
          address: '45%',
          flag: '12'
        }, {
          date: '市场',
          name: '27%',
          address: '45%',
          flag: '12'
        }, {
          date: '同业-R',
          name: '27%',
          address: '45%',
          flag: '12'
        }, {
          date: '同业-T',
          name: '27%',
          address: '45%',
          flag: '12'
        }],
        search: '',
        jobs: [
          {
            label: '整体',
            value: 'ZT',
          },
          {
            label: '车',
            value: 'C',
          },
          {
            label: '飞车',
            value: 'FC',
          },
          {
            label: '餐险',
            value: 'CX',
          },
        ],
        tableTitle: '整体',
      }
    },
    methods: {
      handleCommand(command) {
        console.log(command);
        this.tableTitle = command;
        this.tableData = [{
          date: '哈哈',
          name: '27%',
          address: '45%',
          flag: '12'
        }, {
          date: '啦啦',
          name: '27%',
          address: '45%',
          flag: '12'
        }, {
          date: '阻止',
          name: '27%',
          address: '45%',
          flag: '12'
        }, {
          date: '变v',
          name: '27%',
          address: '45%',
          flag: '12'
        }];
      },
      handleSelectionChangeUsers() {
        console.log('变了');
      }
    },
  }
</script>

<style lang="less" scoped>
</style>