技術標籤：pythonhtmlvuejavamysql

上一篇文章我們對element-ui下table組建做了一次簡單的封裝，實現了根據資料動態建立表頭以及單元格資料，但是單元格的資料以及這種表格形式只能是純文字的展示形式。隨著需求的變化，我們可能會在表格中的顯示按鈕或者圖片、視訊等多媒體可互動的資源。結合element官方文件，對上一篇封裝的程式碼又做了一層處理。

現有程式碼：

<template>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column  
      v-for="(value, index) in table.tableHeader"          
      :prop=" String(index) "
      :label="value"
    >
    </el-table-column>
    </el-table>
</template>
 

<script>
    return {
      table:{
        tableData: [
            ['2016-05-01', '張小虎', '瀋陽市普陀區金沙江路 1518 弄'],
            ['2016-05-02', "李小虎", '上海市普陀區金沙江路 1518 弄'],
            ['2016-05-03', '王小虎', '北京市普陀區金沙江路 1518 弄']
        ],
        tableHeader: ['日期', '姓名', '地址']
      }
    }
</script>
 

封裝後的程式碼：

<template>
  <el-table
    :data="table.tableData"
    border
    style="width: 100%">
    <el-table-column  
      v-for="(value, index) in table.tableHeader"       
      :prop="String(index)"
      :label="value"
    >
      <template slot-scope="scope">
        <div v-if="scope.row[index].indexOf('http') === -1">{{scope.row[index]}}</div>
        <img v-else :src="scope.row[index]" />
        </template>
    </el-table-column>
    </el-table>
</template>
 

return {
  table:{
    tableData: [
      ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdnimg103.lizhi.fm%2Faudio_cover%2F2017%2F10%2F12%2F2629782108856577031_320x320.jpg&refer=http%3A%2F%2Fcdnimg103.lizhi.fm&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612513335&t=a67d1ed2eb2e271e9fa526dc8d51acfc', '張小虎', '瀋陽市普陀區金沙江路 1518 弄'],
      ['2016-05-02', "李小虎", '上海市普陀區金沙江路 1518 弄'],
      ['2016-05-03', '王小虎', '北京市普陀區金沙江路 1518 弄'],
      ['2016-05-04', '王小虎', '北京市普陀區金沙江路 1518 弄']
    ],
    tableHeader: ['日期', '姓名', '地址']
   }
}

可以看到第一行的第一個單元格的資料是一個圖片地址，當我們遇到這種圖片地址的時候，在模版中我們做了一下判斷，用圖片的方式顯示，下面是封裝前後效果對比

本篇文章只是對自己遇到的需求做了一個簡單的總結，沒有涵蓋到各類情況。請諒解！！！