VUE项目笔记

参考学习网站

跳转页面传递对象

	//传参
    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>