跳转页面传递对象
//传参
this.$router.push({name: 'Edit', query: {data: row}});
//接收参数
this.$route.query.data.name
this.$route.query.data.id
跳转页面传递参数
//传参 参数为汉字时需要转换下encodeURIComponent(‘汉字’)
this.$router.push(`/edit/?id=${row.id}`)
//接收参数 decodeURIComponent(this.$route.query.汉字)
this.$route.query.id
Vue事件冲突
@click.stop
组件嵌套,父组件和子组件都有点击事件监听时。此时,我想点击子元素获取子元素的点击事件,但却触发的是父元素的事件。比如说在使用
el-tree
标签时,在一级目录树上还有点击事件A
,这个时候点击A
的时候就会触发目录的展开/收缩,这种情况就可以通过在A事件上加@click.stop="() => update(node, data)
解决此问题。
@click.prevent
如一个a标签,点击会跳转到目标链接网页中,但如果我们不想让它跳转但还想使用a标签的话,此时就需要使用
@click.prevent
方法。<a href="http://www.baidu.com" @click.prevent='notLink'>百度</a>
Table 表格
包括属性拼接显示,el-link
点击直接下载等。
示例
<el-table :data="tableData.page" style="width: 100%" border v-loading="tableLoading">
<el-table-column prop="add_user_name" label="录入用户" width="80" align="center"></el-table-column>
<el-table-column prop="add_date" label="录入时间" align="center"></el-table-column>
<el-table-column prop="type_name" label="录入类型" width="130" align="center"></el-table-column>
<el-table-column label="执行/完成" align="center">
<template slot-scope="scope">
<span>{{scope.row.start_date+' 至 '+scope.row.end_date}}</span>
</template>
</el-table-column>
<el-table-column prop="num_all" label="总数" width="80" align="center"></el-table-column>
<el-table-column prop="num_ok" label="成功" width="80" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-link type="primary" :href="file_url+'/'+scope.row.origin_file">源文件</el-link>
<el-link type="danger" :href="file_url+'/'+scope.row.error_file" v-if="scope.row.num_ok<scope.row.num_all"
style="margin-left: 10px">错误数据</el-link>
</template>
</el-table-column>
</el-table>
同一个标签多个v-if条件,修改Tree 树形控件高度
<el-tree :data="class_data" node-key="id" :expand-on-click-node="true">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span style="padding-right: 10px;">{{ data.name }}</span>
<div style="flex-grow: 1"><el-divider></el-divider></div>
<div style="padding-left: 10px;">
<el-button type="text" size="14px" v-if="node.level == 1 && has_permission('')"
@click.stop="() => append(node, data)"
>添加班级</el-button>
<template v-else>
<el-button type="text" size="14px"
@click.stop="() => update(node, data)"
v-if="has_permission('')">修改</el-button>
<el-button type="text" size="14px"
@click.stop="() => remove(node, data)"
v-if="has_permission('')">删除 </el-button>
<el-button type="text" size="14px"
@click.stop="() => move(1, node, data)"
v-if="has_permission('')">上移</el-button>
<el-button type="text" size="14px"
@click.stop="() => move(2, node, data)"
v-if="has_permission('')">下移</el-button>
</template>
</div>
</span>
</el-tree>
------------------------------------------------------------------------------------
<style scoped>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
padding-right: 8px;
}
#ClassPage >>> .el-tree-node__content {
height: 40px;
}
</style>