Web前端筆記-element ui中table中某列添加a便籤進行跳轉

效果是這樣的：

這裏的文章標題和查看都可以進行跳轉。

其中對應的代碼如下：

    <template style="height: 100%">
      <el-table
        :data="this.tableDataList"
        height="95%"
        style="width: 100%"
        :row-style="iRowStyle"
        :cell-style="iCellStyle"
        :header-row-style="iHeaderRowStyle"
        :header-cell-style="iHeaderCellStyle"
        :fit="true"
      >
        <el-table-column
          prop="createTime"
          label="創建時間"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="文章標題"
          min-width="400"
        >
          <template slot-scope="tableDataList">
            <a :href="tableDataList.row.url"
               target="_blank"
               class="TestCSS">{{tableDataList.row.title}}
            </a>
          </template>

        </el-table-column>
        <el-table-column
          prop="visitor"
          label="訪問量"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="jump"
          label="查看"
          width="50"
        >
          <template slot-scope="tableDataList">
            <a :href="tableDataList.row.url"
               target="_blank">查看
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新時間"
          width="100"
        >
        </el-table-column>
      </el-table>
    </template>

此處的tableDataList

是從父類通過axios傳到子組建的

此處row指的是行，並不是axios獲取的數據。填寫row即可，相當於tableDataList['當前行']，url是tableDataList中一個數據的對象中的鍵。

這裏也是一樣的：

通過這種方式就可以在element ui中table添加a標籤。