Vue进阶（幺伍陆）：iView实现table渲染html标签内容 及 vue项目启动后自动打开页面并设置默认浏览器

Vue+iView项目开发过程中，需要实现页面根据html格式的字符串，在页面中解析的效果。 例如 let htmlStr='<div style="font-size=16px">我是小标题</div>' 页面中显示效果如下：

主要是在render()函数中实现,示例代码如下：

{
  title: "标题",
  key: "title",
  align: "center",
  className:'cleanTitle',
  render:(h,params)=>{
	  return h("div",{domProps:{
	     innerHTML:`<a href=`+params.row.url+` target='_blank'>`+params.row.title+`</a>`//渲染html内容
	  }})
	  // return <a href={`${params.row.url}`} target='_blank'>{params.row.title}</a>  直接渲染标签
 }

如果需要vue项目启动后自动打开页面并设置默认浏览器，如何实现呢？以windows 系统为例，操作方法如下：

一、修改默认浏览器

设置谷歌浏览器为默认浏览器。

1、首先打开“开始菜单”，点击“控制面板”；

2、在“控制面板”里面找到“默认程序”，进入后点击“设置默认程序”；

3、加载好后选择 “谷歌浏览器”；

4、选择“将此程序设置为默认值”，如果安装360安全卫士，必须先退出360安全卫士，否则设置不起效果。

5、选择“选择此程序的默认值”，全选所有的扩展名，保存。

二、vue 项目启动自动打开页面

若需要Vue项目启动后自动打开浏览器展示页面，还需要打开config文件下的index.js文件，更改autoOpenBrowser为true即可实现。

vue 脚手架搭建项目后启动npm run dev，会出现

Your application is running here: http://localhost:8080

同时，Chrome浏览器自动打开。

三、拓展阅读

在前期博文《Vue进阶（幺陆肆）：vue自定义拖动指令》讲解了Vue如何自定义拖拽指令，以上方法只是简单实现了元素的基本拖拽，在视图可视化编辑功能中，不仅需要对页面元素进行拖拽，而且还需要实现页面元素可编辑。

在开源项目（esview）基础上已经实现了页面元素属性可编辑，开源项目（vue-drag-resize）基础上实现了页面元素可拖拽功能，现需要对以上2个开源项目进行整合以实现元素可拖拽可编辑。这里涉及到自定义指令的封装。