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>