el-table封装popver組件，点击列筛选行数据功能，支持筛选，搜索，排序功能

已于 2024-07-10 02:19:50 修改
阅读量939 收藏 15
点赞数 25
文章标签： vue.js elementui 前端 javascript css3
于 2024-07-05 22:32:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46631078/article/details/140219469
版权

子组件：

<template>
    <div class="tableTool" ref="tableTool" @click.stop>
        <el-button @click="shengFnc">升序</el-button>
        <el-button @click="jiangFnc">降序</el-button>
        <el-input v-model="keyword" prefix-icon="el-input__icon el-icon-search" type="text" placeholder="搜索"
            @blur="blurFnc"></el-input>
        <div class="select-box">

            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedList">
                <el-checkbox v-for="(item, index) in CheckboxArr" :label="item.id" :key="index" :value="item.id">
                    <span>{{ item[type] }}</span>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="bottom">
            <el-button size="mini" @click="$emit('closeTool')">取消</el-button>
            <el-button type="primary" size="mini" @click="save">确认</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: "tableCol",
    props: {

        ids: {
            type: Array
        },
        type: {
            type: String
        }

    },

    data() {
        return {
            keyword: "",
            checkAll: false,
            checkedList: [],
            options: [],
            isIndeterminate: true,
            allOptions: [],
            CheckboxArr: JSON.parse(localStorage.getItem('CheckboxArr')),
            c: [],
            elementObj: {},
            tableToolelSize: {},
            zishenkuandu: 0
        };
    },
    methods: {
        shengFnc() {
            this.CheckboxArr.sort((a, b) => a.id - b.id);
        },
        jiangFnc() {
            this.CheckboxArr.sort((a, b) => b.id - a.id);
        },
        blurFnc() {
            // console.log(this.keyword);
            if (this.keyword) {
                this.CheckboxArr = this.CheckboxArr.filter(item => {
                    if (this.$props.type == 'date') {
                        return item.date == this.keyword;
                    } else {
                        return item.name == this.keyword;
                    }
                });
            } else {
                this.CheckboxArr = JSON.parse(localStorage.getItem('CheckboxArr'))
            }
        },
        handleCheckAllChange(val) {
            // console.log(val, this.checkedList);
            this.checkedList = val ? this.CheckboxArr.map(item => item.id) : [];
        },
        save() {
            this.c = []
            this.CheckboxArr.forEach(r => {
                this.checkedList.forEach(i => {
                    if (r.id == i) {
                        this.c.push(r)
                    }
                })
            })
            this.$emit("saveSeach", this.c);
        },


    },
    mounted() {
        // console.log(this.CheckboxArr, JSON.parse(this.$props.elementPosition), "传入的数据");
        this.checkedList = [...this.$props.ids]
        if (this.CheckboxArr.length == this.checkedList.length) {
            this.checkAll = true
        } else {
            this.checkAll = false
        }

    },

};
</script>

<style scoped>
.tableTool {
    /* position: fixed; */
    background: #fff;
    box-shadow: 0 0 5px #ccc;
    padding: 10px;
    z-index: 999;


}

/deep/.el-input__inner {
    padding-left: 30px;
}

.select-box {
    border: #ccc solid 1px;
    padding: 10px;
    margin-top: 10px;
    max-height: 280px;
    overflow: auto;
    max-width: 400px;
}

/deep/ .el-checkbox {
    display: block;
    margin-top: 5px;
}

/deep/ .el-radio-group {
    display: flex;
    flex-direction: column;
}

.bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}


.el-checkbox:last-of-type {
    margin-right: none;
}
</style>

父组件：

<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <el-button @click="dialogVisible = true">求和</el-button>
    <el-input v-model="searchValue"></el-input>
    <el-steps :active="3" simple>
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>

    <el-table :data="tableData" height="250" border style="width: 100%;position: relative;" id="table1">

      <el-table-column prop="date" label="日期" width="180" align="center">
        <template v-slot:header>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'date')">
          </div>
          <span class="table-heard-filter" style="color: red; font-weight: bold;">0</span>
        </template>

      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center">
        <template v-slot:header>
          <el-checkbox v-model="checked2" style="float: left;"></el-checkbox>
          <div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"
            @click.stop="filterData($event, 'name')">
          </div>
          <span class="table-heard-filter">1</span>
        </template>

      </el-table-column>
    </el-table>
    <div v-if="showFilterTool" ref="popover" class="popover" :style="popoverStyle" style="position: absolute;">

      <TableTool ref="selectTool" @closeTool="closeTool" @saveSeach="saveSeach" :ids="ids" :type="type" />
    </div>
    <i v-if="showFilterTool" class="el-icon-caret-top" :style="{ left: a + 'px', top: b + 20 + 'px' }"
      style="position: absolute;"></i>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span slot="footer" class="dialog-footer">
        <span>{{ form.address }}</span>
        <span>{{ form.name }}</span>
        <span>{{ form.password }}</span>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button type="primary" @click="share(form)">复制</el-button>
        <el-button type="primary"
          @click="printFnc('https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641', 'jpeg')">打印</el-button>
      </span>
    </el-dialog>
    <div style="width: 200px;height: 20px;background: rebeccapurple;position: fixed;top: 20px;left:20px"
      ref="pageContainer" @click="filterData">
    </div>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import TableTool from '@/components/TableTool.vue'
import ColumnDialog from './ColumnDialog.vue'
import { Checkbox } from 'element-ui';
import watermark from '@/utils/watermark.js'
import printJS from 'print-js'
export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    TableTool,
    ColumnDialog
  },
  computed: {
    popoverStyle() {
      return {
        left: this.popoverPosition.left + 'px',
        top: this.popoverPosition.top + 14 + 'px',
      };
    },
  },
  data() {
    return {
      a: "",
      b: "",
      popoverPosition: { left: 0, top: 0 },
      form: {
        address: "https://www.baidu.com/", // 地址信息
        name: "张三",
        password: "123",
      },
      isShow: false,
      dialogVisible: false,
      checked: false,
      checked2: false,
      summaryShow: false,
      summary: [],  // 用于存放总计数据的数组
      searchValue: "",
      CheckboxArr: [],
      ids: [], // 初始化ids为空数组
      type: "",
      currentSummaryColumn: null, // 当前点击的列名
      tableData: [{
        date: '2016-05-03',
        name: 56,
        address: 8,
        id: "0"
      }, {
        date: '2016-05-02',
        name: 78,
        address: 8,
        id: "1"
      }, {
        date: '2016-05-04',
        name: 0,
        address: 8,
        id: "2"
      }

      ],
      showFilterTool: false,
      CheckboxArr: [],
      ids: [],
      type: "",
      currentSummaryColumn: null // 当前点击的列名
    }
  },
  mounted() {
    localStorage.setItem('CheckboxArr', JSON.stringify(this.tableData))
    this.closeTableToolFnc()
    //添加水印
    // console.log(this.$refs.pageContainer);
    // watermark.set('1234567', '谁在花里胡哨', this.$refs.pageContainer)


  },
  beforeDestroy() {
    this.closeTableToolFnc()
  },
  methods: {
    // 判断是否是 IE 浏览器
    isIE() {
      if (window.ActiveXObject || "ActiveXObject" in window) {
        return true;
      } else {
        return false;
      }
    },
    share(url) {
      if (this.isIE()) {

        this.$copyText(this.form.password);
        // this.$refs.addressInput.select(); // 实现选中效果
        this.$message.success("复制成功!");
      } else {

        let obj = {
          '地址': this.form.address,
          '用户名': this.form.name,
          '密码': this.form.password
        }
        const objectString = JSON.stringify(obj);
        this.$copyText(objectString)
          .then((res) => {
            // this.$refs.addressInput.select(); // 实现选中效果
            this.$message.success("复制成功!");
          })
          .catch((err) => {
            this.$message.error("该浏览器不支持自动复制, 请手动复制");
          })
      }
    },
    printFnc(url, filetype) {
      let path = url
      let type = ''
      const acceptedFileTypes = ['png', 'jpeg', 'jpg', 'gif'];
      console.log(acceptedFileTypes.includes(filetype));
      if (acceptedFileTypes.includes(filetype)) {
        type = 'image'
      } else {
        type = filetype
      }
      printJS({
        printable: path,
        type: type,
        // showModal: true,//开启加载modal
        onErrorL: (err) => {
          return this.$message({
            type: "error",
            message: '打印失败，请检查打印机设置或尝试保存文件！'

          })
        }
      })
    },
    //子组件只用@click.stop防止事件冒泡，父组件单击任意位置关闭子组件
    closeTableToolFnc() {
      document.addEventListener("click", (e) => {
        this.closeTool()
      });
    },
    filterData(e, type) {
      this.type = type
      this.showFilterTool = true;
      this.$nextTick(() => {
        const buttonRect = e.target.getBoundingClientRect();
        const popoverRect = this.$refs.popover.getBoundingClientRect();
        this.a = buttonRect.left
        this.b = buttonRect.top
        console.log(buttonRect.left);

        let leftPosition = buttonRect.left - (popoverRect.width - buttonRect.width) / 2;

        // 调整popover位置，防止超出可视范围
        if (leftPosition < 0) {
          leftPosition = 10;
        } else if (leftPosition + popoverRect.width > window.innerWidth) {
          leftPosition = window.innerWidth - popoverRect.width - 10;
        }


        this.popoverPosition = {
          left: leftPosition,
          top: buttonRect.bottom,
        };
        this.ids = []
        this.tableData.forEach(t => {
          this.ids.push(t.id)
        })
        this.showFilterTool = true;

      });
    },
    closeTool() {
      this.showFilterTool = false;
    },

    saveSeach(data) {
      this.tableData = []
      this.tableData = data
      this.closeTool();
    },
  }

}
</script>
<style>
.Tableone ::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  display: none
}

.el-icon-caret-top {
  /* position: absolute; */
  color: #999;
  /* top: -13px; */
  font-size: 20px;

}
</style>

效果：

周bro
关注
  • 25
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table,分页，搜索，多条件筛选
takuyandy的博客
07-04 231
el-table的 @filter-change="handleFilterChange" 在点击筛选/重置时均会触发，所以筛选后重新赋给tableData。
vue el-table 表头搜索（筛选）功能 头部添加搜索icon 点击显示popover 阻止在字段排序（一）
dangsh_的博客
11-13 6186
使用elemen的render-header 在funcion中 用createElement 创建虚拟DOM。 首先创建SelectHeader.vue组件 由于element内置icon的search长这样 太丑，我找了个合适的 需要注意的使用的element内置的排序sortable 那么在点击整个表格头部区域时 都会触发排序 故在点击搜索icon的时候也会排序，影响体验，需要阻止这个排序 用@click.stop=“popClick” 来阻止默认的排序 <template> &l
el-table 实现表格列筛选
yand_vv的专栏
04-23 1157
【代码】el-table 实现表格列筛选。
el-table/elementui 表格组件实现每一列的筛选（两种方法）
small_33的博客
12-15 5872
大家好呀，珊妹儿最近更新的有点慢了，是因为最近疏于学习，工作也是没接触到一些新的技术，但近期由于工作使用了el-table组件，需求又有个列的筛选，鉴于项目前期使用的jqGrid,大家都知道，这个插件想要实现列的筛选很容易，因为它自己封装好了，直接可以用，但是我们的新功能使用了vue，所以选择了el-table。 大家应该都知道官网上的筛选，只提供了类似下拉框多选的筛选，如果这一列是日期的话，我们希望是筛选的时候选择的是日期呢，又或者是input框呢？下面看下图就明白了： text类...
el-table表格项筛选和排序
记忆碎片
01-26 858
el-table 表格字段筛选和排序功能和后端接口交互处理逻辑
el-table实现列筛选功能，控制列的显示和隐藏（实现简单，效果满分）
热门推荐
weixin_40252368的博客
04-24 1万+
el-tablet添加列筛选功能，控制列的显示和隐藏
简单封装el-popover用于el-table-column里渲染
Joel的博客
06-20 2448
单行或多行文本溢出显示省略号，是很常见的需求。 然后今天遇到复杂点的需求，在el-table里有些单元格文本长，有些短，需要判断是否溢出，溢出时弹框显示所有文本。 判断文本是否溢出，参考此文 https://juejin.im/post/5d7798dc6fb9a06acc00af6c 但是，在el-table里，单元格是el-table-column渲染的，而el-popover好像没有提供相关处理逻辑，所以需要简单封装一下，以便在el-table-column 里渲染。 没有时间整理文字，暂记。 &lt
el-popover在el-table中，弹出多个以及内部取消按钮无效问题
Abcde467913的博客
10-07 2421
vue3中setup语法糖解决elementui中popover组件无法关闭，多个同时出现的情况
记录在el-table中使用el-popover遇到的坑
XIYUXU的博客
12-03 3496
由于项目需要实现在表格中删除前进行提示，最终效果如下图。 但在开发过程中点击删除popover弹框不出现，在网上找了很多方法都不能解决问题，就综合了一下。 解决方法： html部分： <el-table-column label="操作"> <template slot-scope="scope"> <el-popover ...
【ElementUI】el-table可编辑/输入框 卡顿性能问题解决案
csdn_vplus的博客
04-13 9810
大家好，我是九幡。 在这篇文章我将为大家分享一个优化可编辑el-table性能问题的方案。 目录 问题背景 原因分析 解决思路 样例代码 页面效果 方案的优缺点 问题背景 用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。 原因分析 1. el-input组件实例数量过多。 2. el-input的v-model在表单输入时频繁触发input事件。 解决思路 1. 用原生input替换el-input，以减...
el-table同时固定左列和右列时，出现错误情况
qq_37635012的博客
02-21 390
【代码】el-table同时固定左列和右列时，出现错误情况。
使用 el-popover 组件 + el-table 组件实现 ElementUI 动态渲染表格功能
微光无限的博客
03-27 2966
使用 el-popover 组件 + el-table 组件实现 ElementUI 动态渲染表格功能
记录下el-table列可输入筛选
weixin_43219354的博客
07-29 793
el-table 添加表格列筛选条，记录下 <el-popover placement="bottom" width="300" trigger="manual" v-model="visible" @show="showPopover" popper-class="charge-item-header-popover" > <el-input prefix-icon="el-icon-search"
element表格查询(多条件)
九亿宅男的梦的博客
05-12 4434
https://blog.csdn.net/luzhaopan/article/details/81569907 <el-table ref="multipleTable" :data="tables" tooltip-effect="dark" style="width: 100%" max-height="70vh" @selection-change="handleSelectionChange" :row-style="rowClass" > r
el-table筛选数据
Pert的博客
08-02 4830
el-table
el-table 表单头部插入搜索框(vue2)
最新发布
weixin_50339217的博客
05-16 947
【代码】el-table 表单头部插入搜索框(vue2)
VUE el-table列表搜索功能-纯前端实现
CC酱写前端的博客
04-22 860
对el-table数据进行搜索筛选，但是不想调取接口，纯前端实现。
vue表格el-table的表头的多重筛选功能（接后端数据）
爱意迷了眼丶的博客
05-26 1148
【代码】vue表格el-table的表头的多重筛选功能（接后端数据）
点击el-input出现el-popover,并且时el-popver始终处理el-input下方
12-09
为了实现点击el-input出现el-popover，并且使el-popover始终出现在el-input下方，可以按照以下步骤进行操作： 1. 在el-input标签中添加ref属性，用于在JavaScript中引用该元素。 2. 在el-input标签中添加@click事件，用于在单击el-input时触发JavaScript函数。 3. 在JavaScript函数中，使用this.$refs获取el-input元素的位置信息，并计算出el-popover应该出现的位置。 4. 在el-popover标签中添加v-model属性，用于控制el-popover的显示和隐藏。 5. 在el-popover标签中添加popper-class属性，用于自定义el-popover的样式。 6. 在el-popover标签中添加transition属性，用于设置el-popover的过渡效果。 下面是一个示例代码，可以实现点击el-input出现el-popover，并且使el-popover始终出现在el-input下方： ```html <template> <div> <el-input ref="input" v-model="inputValue" placeholder="请输入内容" @click="showPopover"></el-input> <el-popover v-model="popoverVisible" popper-class="my-popover" transition="el-fade-in-linear"> <div>这是一个el-popover</div> </el-popover> </div> </template> <script> export default { data() { return { inputValue: '', popoverVisible: false } }, methods: { showPopover() { this.popoverVisible = true; this.$nextTick(() => { const inputRect = this.$refs.input.getBoundingClientRect(); const popoverRect = this.$refs.popover.$el.getBoundingClientRect(); const top = inputRect.top + inputRect.height; const left = inputRect.left + inputRect.width / 2 - popoverRect.width / 2; this.$refs.popover.$el.style.top = `${top}px`; this.$refs.popover.$el.style.left = `${left}px`; }); } } } </script> <style> .my-popover { background-color: #f0f0f0; color: #333; border: none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值