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

作为基础框架实现的组件库