vue element table表格链接跳转

由于后端返回表格内容包含文字和链接

  • 首先需要判断是否含有链接
  • 如果有提取链接这里可以用过滤
  • 如果没有a标签或者el-link禁止跳转
    代码如下
	<el-table-column prop='news' label= '内容' width= '100'>
		<template slot-scope= 'scope'>
			<el-link :href= 'scope.row.news | getUrl'> 
				//内容全部展示如果需要展示文字可以再过滤一下
				{{scope.row.news}}
			el-link>
		template>
	el-table-column>
...
filters: {
	getUrl(row) {
		// 判断链接位置 是否可以跳转
		let index= row.lastIndexOf('\n')
		if(index == '-1) {
			return 'javascript:;'
		}else {
			return row.substring(index+1, row.length)
		}
	}
}

你可能感兴趣的:(vue,element,vue.js,前端,javascript)