iview table点击单元格打开新页面、expand展开子组件调用父组件事件

一、点击单元格打开新页面

cloumns

columns:[
 {
	 title: "项目名称",
	 align: "center",
	 width:170,
	 key: "projectName",
	 render: (h, params) => {
	 //字符溢出显示省略号，鼠标悬停显示全部信息
	   if(params.row.projectName&&params.row.projectName.length > 7){
	     return h("span",{
	       //提示信息
	         domProps: {
	           title: params.row.projectName
	         },
	         on: {
	         //监听点击事件
	           click: () => {
	              this.toDetail(params.row.id);
	           }
	         },
	         style:{
	           color:"#2b85e4",
	           cursor:"pointer"
	         }
	     }, params.row.projectName.substring(0,7)+"...");
	   }else{
	     return  h('span',{
	       on: {
	           click: () => {
	             this.toDetail(params.row.id);
	           }
	         },
	       style:{
	         color:"#2b85e4",
	         cursor:"pointer"
	       }
	     },params.row.projectName);
	   }
	 }
}
]

vue2.0以后$router.push 和 $router.go就不支持新窗口打开的属性了，这时需要使用$router.resolve

toDetail(id){
  let route = this.$router.resolve({
    name:'projectDetail',
    query:{
      id:id
    }
  })
  window.open(route.href,"_blank");
  //this.$router.push({name:'projectDetail',params:{id:id}});
},

跳转的页面.vue

<template>
  <div>
  </div>
</template>
<script>
export default {
  data(){
    return{
     
    }
  },
  methods:{
  }, 
  mounted(){
  //获取参数
    this.id = this.$route.query.id;  
  }
}
</script>

二、expand展开子组件调用父组件事件

父组件table.vue --columns

        {
            title:"项目列表",
            type: 'expand',
            width: 100,
            render: (h, params) => {
                return h(expandRow, {
                	//prop向子组件传值
                    props: {
                        row: params.row.result
                    },
                    on:{
                    //监听子组件showDetail事件
                      showDetail:value => {
                      //确保dom更新完成
                        this.$nextTick(() => {
                           this.toDetail(value[0]);
                        })
                      }
                    }
                })
            }
        },

子组件expand.vue

<template>
    <Table :columns="columns" :data="row"></Table>
</template>
<script>
    export default {
    //子组件接受父组件传值
        props: {
            row: Array
        },
        data(){
            return{
                columns:[
                {
                    title: "项目名称",
                    align: "center",
                    key: "projectName",
                    render: (h, params) => {
                       return  h('span',{
                            on: {
                            //点击时调用子组件this.detail方法，使用$emit触发showDetail事件
                                click: () => {
                                    this.detail(params.row.id);
                                }
                                },
                            style:{
                                color:"#2b85e4",
                                cursor:"pointer"
                            }
                       },params.row.projectName);

                }
 
            ]
            }
        },
        methods:{
        //使用$emit触发showDetail事件
            detail(id){
               this.$emit('showDetail',[id]);
            }
        }

    };
</script>

知识点：
1.组件通信

子组件用$emit触发事件，父组件用$on监听事件；
父组件通过props向子组件传递数据和参数；
2.$nextTick
Vue在观察到数据变化是并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，避免不必要的操作。在下一个事件循环tick中，vue刷新队列并执行实际工作（已去重）。$nextTick就是用来知道什么时候DOM更新完成的。