cloumns
columns:[
{
title: "项目名称",
align: "center",
width:170,
key: "projectName",
render: (h, params) => {
//字符溢出显示省略号,鼠标悬停显示全部信息
if(params.row.projectName&¶ms.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 和 r o u t e r . g o 就 不 支 持 新 窗 口 打 开 的 属 性 了 , 这 时 需 要 使 用 router.go就不支持新窗口打开的属性了,这时需要使用 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>
{
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更新完成的。