ElementUI el-table自定义表头图标、悬停提示

官网提到在element-ui table列表自定义表头,修改列标题样式、添加tooltip,需要render-header,但是在2.4.11及以后,element-ui官方已经更新了,并添加了自定义表头的方法

需要通过设置 Scoped slot 来自定义表头

demo:

<template slot="header" slot-scope="scope">
 ...
</template>

完整示范:

<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="Date"
      prop="date">
    </el-table-column>
    <el-table-column
      prop="name">
      <template slot="header" slot-scope="scope">
        <span>名字</span>
        <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        search: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>

效果:
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
为了在el-table表头中使用el-popover,您需要为每个popover绑定一个独特的变量。以下是一个例子,展示了如何在el-table表头中使用el-popover: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot="header"> <div> 日期 <el-popover placement="bottom" width="200" trigger="hover" v-model="popoverVisible1" > <p>这是一个日期选择器</p> <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker> </el-popover> <el-button slot="reference" icon="el-icon-question" size="mini" @click="popoverVisible1 = true" ></el-button> </div> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> <template slot="header"> <div> 姓名 <el-popover placement="bottom" width="200" trigger="hover" v-model="popoverVisible2" > <p>这是一个输入框</p> <el-input v-model="name" placeholder="请输入姓名"></el-input> </el-popover> <el-button slot="reference" icon="el-icon-question" size="mini" @click="popoverVisible2 = true" ></el-button> </div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2022-01-01', name: '张三' }, { date: '2022-01-02', name: '李四' }, { date: '2022-01-03', name: '王五' } ], popoverVisible1: false, popoverVisible2: false, date: '', name: '' }; } }; </script> ``` 在这个例子中,我们为每个el-popover绑定了一个独特的变量(popoverVisible1和popoverVisible2),这样每个popover就可以正常渲染了。同时,我们还为每个popover添加了一个el-button,当用户将鼠标悬停在这个按钮上时,popover就会显示出来。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值