element UI的header修改自定义内容
首页 > Vue    作者:lininn   2018年6月15日 14:48 星期五   热度:4656°   百度已收录  
时间:2018-6-15 14:48   热度:4656° 


模板内容: 
<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column  :label="str" width="180" :render-header="renderheader">
         <template scope="scope">
            <p>姓名: {{scope.row.date}}</p>
          </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column label="地址">
       
      </el-table-column>
    </el-table>
  </template>
js内容:



 data() {
        return {
           str:"日期",
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '<span>上海市普陀区金沙江路 1518 弄</span>'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods:{
      renderheader(h, { column, $index }) {
  return h('span', {},["你好",
    h('b', {"class":"aa"},[column.label]),
    "哈哈"
  ])


通过render方法重新渲染,加入指定内容,template内是渲染表格内部的值

二维码加载中...
本文作者:lininn      文章标题: element UI的header修改自定义内容
本文地址:?post=165
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn