element ui表格表头中某列标题用图片图标代替

news/2024/7/19 14:41:20 标签: vue, elementui, js, html, html5

效果图:在这里插入图片描述
我这里用的是图标代替,图片也是一样的。
最关键的是::render-header=“renderHeader” ,他是将列标题替换为其他内容。
话不多说,代码来了!
HTML:

html">   <el-table-column 
	   prop="xxx" 
	   :render-header="renderHeader" 
	   label="" 
	   width="55" 
	   fixed="left"
   ></el-table-column>

JS:

methods:{
    renderHeader() {
      return(
        <i class="el-icon-lock"></i>
      )
    }

注释:
prop=“xxx” 是字段名
:render-header=“renderHeader” 将列标题替换为其他内容
label=“锁” 列标题,加了上面那行代码这行可以不加
width=“55” 列宽
fixed=“left” 固定定位,当表格有很多列时,出现x轴滚动条,往右滑,这列会固定在最左侧,不会被页面遮住。
如果想要换成图片,return里面换成图片就可以了。
没了,结束了,是不是很简单呐
最后:如果此篇博文对您有帮助,还请动动小手点点关注点点赞呐~,谢谢 ~ ~


http://www.niftyadmin.cn/n/734860.html

相关文章

Hazelcast更换CEO,承诺继续造福开源社区

Hazelcast是一家以开发人员为中心的基础设施组件开发商&#xff0c;其产品包括一个内存数据网格&#xff08;IMDG&#xff09;和一个流式处理引擎&#xff08;Hazelcast Jet&#xff09;。近日&#xff0c;Hazelcast经历了一场管理层人员变动。\\之前的首席执行官Greg Luck将成…

element ui表格中根据某列的值判断操作栏里面的按钮显示隐藏

效果图&#xff1a; 这里我上通过审核意见那列的值判断操作里面的审核按钮的显示隐藏。 首先审核意见那列后台给我返回的是A、B、null三种值&#xff0c;然后我再将这三种值转换为已驳回、已通过、未审核。三个中文显示在页面上。 这个是通过 &#xff1a;formatter属性改的&am…

微信小程序 - 文本框显示限制最大长度

wxml 1 <view classtextarea-count> 2 <textarea placeholder请输入文字 bindinput"getWords" maxlength{{maxTextLen}}></textarea> 3 <view classtext-count-display f f-end>{{textLen}}/{{maxTextLen}}</view> 4 </view>…

vue前端通过Base64加密解密

效果图&#xff1a; 方法&#xff1a; 1.下依赖 cnpm i js-base64 --save //没有淘宝镜像就用npm&#xff0c;一样的&#xff0c;就是下载慢点而已2.在需要的地方引入 //在单个页面引入 let Base64 require(js-base64).Base64; let str"哈哈哈"; console.log(Base…

js产生任意2个区间内的随机整数

var code myFunction(30,100); function myFunction(begin,end){ var num Math.round(Math.random()*(end-begin)begin); return num; }转载于:https://www.cnblogs.com/feiwenstyle/p/9585528.html

vue-amap添加某个省市县区的边界线,添加某个省市县区的行政区划

效果图 基础步骤我这里就不过多介绍了&#xff0c;大家可以去看文档&#xff1a;vue-amap文档或者vue-amap官网 实现步骤思路&#xff1a; 百度上都是一个省整的&#xff0c;没有往下分&#xff0c;或者是一个市&#xff0c;县整的&#xff0c;都没有往下分级。既然没有&#x…

vue-amap动态循环添加多个点,点击点出现弹窗信息

效果图&#xff1a; 思路&#xff1a;通过后端的接口数据循环遍历出点的经纬度、弹窗信息&#xff0c;依次push进一个空的数组&#xff0c;最后将这个数组赋值给data里面定义的变量。 话不多说上代码&#xff1a; HTML <el-amap-markerv-for"marker in markers"…

【leetcode】564. Find the Closest Palindrome

题目如下&#xff1a; 解题思路&#xff1a;既然是要求回文字符串&#xff0c;那么最终的输出结果就是对称的。要变成对称字符串&#xff0c;只要把处于对称位置上对应的两个字符中较大的那个变成较小的那个即可&#xff0c;假设n1234,1和4对称所以把4变成1&#xff0c;2和3对称…