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>

然后对表格右上角的表头信息加超链接：" More<< "

<el-table-column
          prop="date1"
          width="100">
          <template slot="header" slot-scope="scope">
                  <!-- <span>名字</span> -->
                  <a href="" target="_blank">More<<</a>
                </template>
        </el-table-column>

这样一个信息公告的表格就完成啦！
为了界面的美观，我做了两个表格，全部代码如下：

<template>
  <div >
    <div style="float: left;width: 50%;">
      <el-table
        :data="tableData1"
        stripe
        style="width: 100%">
        <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>

        <el-table-column
          prop="date1"
          width="100">
          <template slot="header" slot-scope="scope">
                  <a href="" target="_blank">More<<</a>
                </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin-left: 50%; width: 50%;">
        <el-table
            :data="tableData2"
            stripe
            style="width: 100%">
            <el-table-column
              prop="msg"
              label="ACM大事记"
              width="450">
                <template slot-scope="scope">
                   <a href="scope.row.msg" target="_blank" class="buttonText">{{scope.row.msg}}</a>
                 </template>
            </el-table-column>

            <el-table-column
              prop="date2"

              width="100">
              <template slot="header" slot-scope="scope">
                      <a href="" target="_blank">More<<</a>
                    </template>
            </el-table-column>
          </el-table>
      </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        tableData1: [{
          notice: '校内天梯选拔赛开始报名啦！',
          date1 :'2020-3-6'
        }, {
          notice: '校内天梯选拔赛开始报名啦！',
          date1 :'2020-3-6'
        }, {
          notice: '校内天梯选拔赛开始报名啦！',
          date1 :'2020-3-6'
        }, {
          notice: '校内天梯选拔赛开始报名啦！',
          date1 :'2020-3-6'
        }],
        tableData2: [{
          msg: '校内天梯选拔赛开始报名啦！',
          date2 :'2020-3-6'
        }, {
          msg: '校内天梯选拔赛开始报名啦！',
          date2 :'2020-3-6'
        }, {
          msg: '校内天梯选拔赛开始报名啦！',
          date2 :'2020-3-6'
        }, {
          msg: '校内天梯选拔赛开始报名啦！',
          date2 :'2020-3-6'
        }]
      }
    }
  }
</script>

<style>
  a{
    color: #7ac804;
  }
</style>