vue+ element ui 实现消息公告（表格+自定义表头）

效果图如下~

首先到element ui 官网找到你想要的表格代码，我选择的是第二种，然后将代码复制到新建的vue文件（Message.vue）中，在App.vue 中进行声明:

<template>
  <div id="app">
    <Message></Message>
  </div>
</template>


<script>

  import Message  from './components/Message.vue'
export default {
   
  name: 'App',
   components:{
   
    Message
  }
}
</script>

保存刷新就可以得到官网上的效果啦！
接下来就是对Message.vue文件进行更改。首先更改一下数据，然后对表格中的信息一列加超链接：

<el-table-column
          prop="notice"
          label="通知公告"
          width="450">
            <template slot-scope="scope">
               <a href="scope.row.notice" target="_blank" class="buttonText">{
   {
   scope.row.notice}}</a>
             </template>
        </el-table-column>

然后对表格右上角的表头信息加超链接&