element不占位置的html标簽,element-ui table元件嵌入html元素

vue做了一個簡單的前端頁面，如下圖：

希望滑鼠點執行個體名，實作自動跳轉到oss頁面的任務詳情連結，這就涉及到html的a标簽的href

那麼在table元件裡面怎麼去嵌入html的a标簽呢？代碼如下：

其中以下代碼就是實作el-table-column元件嵌入html元素:

注：scope.row是固定文法，scope.row.task_url就可以得到task_url，scope.row.instance_name得到instance_name.

調用後端Python flask接口傳回的資料格式為：

[

{

"cluster_name": "xxxxxx",

"code": 0,

"data": [

{

"app_id": "xxxxxx",

"error": "ERR#-404: \u63a5\u6536\u5230\u7528\u6237\u8bf7\u6c42\uff0c\u5df2\u5207\u65ad\u6570\u636e\u540c\u6b65\n",

"instance_name": "xxxxxx",

"job_type": "self_built_trsf_inst",

"message": "",

"start_time": "2018-01-16 18:10:54",

"subtask_err": "no subtask error",

"task_schedule": "7/7 : \u505c\u6b62\u8ffd\u52a0binlog",

"task_url": "http://xxx.xxx.xxx.xxx"

},

{

"app_id": "xxxxxx",

"error": "ERR#-406: \u63a5\u6536\u5230\u7528\u6237\u8bf7\u6c42\uff0c\u5df2\u6682\u505c\n",

"instance_name": "xxxxxx",

"job_type": "self_built_trsf_inst",

"message": "",

"start_time": "2018-01-18 12:15:17",

"subtask_err": "no subtask error",

"task_schedule": "6/7 : \u5bf9\u6bd4\u6570\u636e",

"task_url": "http://xxx.xxx.xxx.xxx"

}

],

"msg": "success"

}

，

{

"cluster_name": "xxxxxx",

"code": 0,

"data": [

{

"app_id": "xxxxxx",

"error": "ERR#-310: \u5b50\u4efb\u52a1[5805891]\u5df2\u7ecf\u5931\u8d25,\u8bf7\u5904\u7406\u8be5\u4efb\u52a1\u540e,\u518d\u70b9\u51fb\u91cd\u8bd5\u6216\u8005\u56de\u6eda\n",

"instance_name": "xxxxxx",

"job_type": "trsf_inst",

"message": "",

"start_time": "2018-01-14 16:01:47",

"subtask_err": "ERR#1: MySQL server has gone away\n",

"task_schedule": "5/15 : \u5bfc\u5165\u51b7\u5907\u5230\u65b0\u5b9e\u4f8b",

"task_url": "http://xxx.xxx.xxx.xxx"

},

{

"app_id": "xxxxxx",

"error": "ERR#-310: \u5b50\u4efb\u52a1[5805891]\u5df2\u7ecf\u5931\u8d25,\u8bf7\u5904\u7406\u8be5\u4efb\u52a1\u540e,\u518d\u70b9\u51fb\u91cd\u8bd5\u6216\u8005\u56de\u6eda\n",

"instance_name": "xxxxxx",

"job_type": "trsf_inst",

"message": "",

"start_time": "2018-01-14 16:01:47",

"subtask_err": "ERR#1: MySQL server has gone away\n",

"task_schedule": "5/15 : \u5bfc\u5165\u51b7\u5907\u5230\u65b0\u5b9e\u4f8b",

"task_url": "http://xxx.xxx.xxx.xxx"

}

],

"msg": "success"

}

]

傳回的資料類型是一個清單list，該清單有兩個元素，清單裡面的元素類型是字典dict. 傳回的資料指派給tableData變量.

其中，v in tableData 表示循環tableData這個清單，那麼v就代表清單裡面的每一個元素.

:data="v.data" # v.data其實就是字典裡面key為data的值，如：

{

"app_id": "1252384881",

"error": "ERR#-310: \u5b50\u4efb\u52a1[5805891]\u5df2\u7ecf\u5931\u8d25,\u8bf7\u5904\u7406\u8be5\u4efb\u52a1\u540e,\u518d\u70b9\u51fb\u91cd\u8bd5\u6216\u8005\u56de\u6eda\n",

"instance_name": "xxxxxx",

"job_type": "trsf_inst",

"message": "",

"start_time": "2018-01-14 16:01:47",

"subtask_err": "ERR#1: MySQL server has gone away\n",

"task_schedule": "5/15 : \u5bfc\u5165\u51b7\u5907\u5230\u65b0\u5b9e\u4f8b",

"task_url": "http://xxx.xxx.xxx.xxx"

}

scope.row.task_url 就代表了字典裡面key為task_url的值，這裡是：http://xxx.xxx.xxx.xxx

task_url是在python flask後端拼湊出來的，如下：

task_url = "http://xxx.xxx.xxx.xxx"%(webip,int(cluster_id),int(cluster_id),job_type_str,job_name,job_menu)

由此實作了滑鼠點執行個體名，會自動跳轉到我需要的頁面連結~

注：Element UI是一套基于 Vue 2.0

的桌面端元件庫，采用 Vue 2.0

作為基礎架構實作的元件庫