下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:elementUI中el-table表格自定义表头

作者:翻脸不如翻身     来源: https://www.cnblogs.com/chip-gan/archive/2020/03/10/12457240点击数:2444发布时间: 2020-03-16 20:35:36

标签: 数据库开发table

Web开发

  Table是一个数据库控件,主要用于在web页面上创建表格,其功能与HtmlTable类似。不同的是,Table控件可以用动态的内容以编程的方式来生成表格。

  需求:最近项目开发中使用elementUI的表格组件,表格头部设置label的时候只能是字符串,想在表格头部添加自定义的html标签。

  解决方法:使用render-header

  在column上绑定render-header属性

  <el-table-column:label="地址":render-header="renderHeader"></el-table-column>

  在methods添加renderHeader方法(可以参考elementUI官网rtable详解)

  methods:{

  renderHeader(h){

  return(

  <div>

  <span>地址</span>

  <spanstyle="font-size:12px;">(具体到区县)</span>

  </div>

  )

  }

  }

  <table>标签定义HTML表格。

  简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。

  tr元素定义表格行,th元素定义表头,td元素定义表格单元。

  更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。

赞(15)
踩(0)
分享到:
上一篇:web前端:bfc
华为认证网络工程师 HCIE直播课视频教程