2020-09-26-x
Xplorist Lv6
  2020-09-26 13:30:13 2020-09-26 13:30      

2020-09-26

todo-list

  • Vue分页组件中父组件与子组件通信交互
  • Vue表格组件添加表头表列固定功能

record-list

  • 子组件中点击事件后调用了父组件中的函数，父组件中改变了影响子组件的数据，但是子组件并没有重新初始化，
    问题出在哪儿？
  • 问题出在props的值传进去了，但是子组件的data属性中的值没有响应更新，那么需要响应式更新，就直接使用计算属性
  • 子组件调用父组件方法，除了通过props绑定事件，Vue特有的$emit(‘page-change’, inputPage)方式更为优雅

子组件

1
2
3
4

// PaginationContainer组件
<li v-if="curPage !== 1" v-on:click="pageClick(1), $emit('page-change', 1)">首页</li>

父组件html

1
2
<!-- 父组件调用PaginationContainer组件 -->
<pagination-container v-bind:msg="inputMsg" v-bind:option="pagiOption" v-on:page-change="listByPagi($event)"/>

父组件javascript

1
2
3
4
5
6
7
8
9
10
11
12
// 分页条件查询
listByPagi (pageIndex) {
    this.pageIndex = pageIndex;
    // 发送请求后，返回了数据
    setTimeout(() => {
        this.pageTotal = 500;
        this.pageSize = 100;
        this.rowTotal = 50000;
        
        //this.rowList = [];
    }, 1000);
},
  • Vue分页组件完成了
  • TableContainer组件中加入了表头表列固定的功能，Vue的数据驱动还是很厉害的，表头固定实现起来比DOM操作起来简单多了。

TableContainer组件html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="table-container" v-on:scroll="scrollHandle($event)">
    <table class="table table-bordered">
        <tbody>
            <tr v-for="(x, index) in rowList" v-bind:key="x.id">
                <td class="tbody_left tbody_left_first_col" v-bind:style="{transform: 'translateX(' + scrollLeft + 'px)'}">
                    <button>查看</button>
                    <button>修改</button>
                    <button>删除</button>
                    <button>审核记录</button>
                </td>
                <td class="tbody_left" v-bind:style="{transform: 'translateX(' + scrollLeft + 'px)'}">{{ index + 1 }}</td>
                <template v-for="(y, yIndex) in colList">
                    <td v-bind:key="yIndex">{{ x[y.id] }}</td>
                </template>
            </tr>
        </tbody>
        <thead v-bind:style="{transform: 'translateY(' + scrollTop + 'px)'}">
            <tr>
                <th class="thead_top_left thead_top_left_first_col" v-bind:style="{transform: 'translate(' + scrollLeft + 'px, 0px)'}">操作</th>
                <th class="thead_top_left" v-bind:style="{transform: 'translate(' + scrollLeft + 'px, 0px)'}">序号</th>
                <th class="thead_top" v-for="(x, index) in colList" v-bind:key="index">{{ x.name }}</th>
            </tr>
        </thead>
    </table>
</div>

TableContainer组件JavaScript

1
2
3
4
5
6
methods: {
    scrollHandle (event) {
        this.scrollTop = event.target.scrollTop;
        this.scrollLeft = event.target.scrollLeft;
    },
},

Vue实现表头固定核心代码

1
2
3
4
5
6
7
8
9
10
11
12
// v-on:scroll就相当于监听了scroll时间
v-on:scroll="scrollHandle($event)"

// $event获取到scrollTop值和scrollLeft值，这样实现很优雅，没有任何DOM操作代码
scrollHandle (event) {
    this.scrollTop = event.target.scrollTop;
    this.scrollLeft = event.target.scrollLeft;
},

// 动态改变style的transform属性值，注意属性值需要为字符串格式（如：'translateX(' + scrollLeft + 'px)'）
v-bind:style="{transform: 'translateX(' + scrollLeft + 'px)'}"

home-record-list

  • 星期六了，本应该去做平时计划周末做的事，软路由什么的，但是突然又没了动力，人就是这么无聊的动物。

  • 本周开始了前端的Vue组件使用之旅，让自己开始对组件这种东西非常感兴趣，自己写了两个Vue很实用的组件，感觉也蛮有成就感的。

  • 总结一下本周吧，这周平时貌似都在疯狂熬夜，折腾台式机，把整个电脑的硬盘都重新清了一遍，星期六了，自己也该搞点自己想做的事情了。

  • 本周六的目标就是软路由吧，毕竟还是要上谷歌云的，不用软路由的话有点说不过去，不过现在自己没有硬件，有的只是一个旧的笔记本，做个单臂路由试一下吧。

  • 自己想看电视了，玩客云还是该重新整起来，之前的那个美剧还么看完呢，讲硬件的感觉还听硬核的，硅谷主要讲的是偏软件。

  • 到了寝室就应该忘掉公司的事情，到了公司就应该忘记寝室做的东西，这样才能够愉快地玩耍。

  • 还可以折腾手机，刷机刷起来，刷miui12啊，还是先从软路由开始搞吧。

  • 参考了youtube上【不太老的老李】的视频，然后轻松折腾了一下，然后笔记本变成软路由了，然后装上了v2ray的插件，现在笔记本变成了真正的软路由了，还省去了买其他硬件路由器的麻烦，反正这台电脑也旧了。

  • 还是得感谢开源的大神们，youtube也是个好东西，能够学到很多实用的技术，现在手机上秒开YouTube的4k高清视频。

  • 安才君的路由器太垃圾了，还是我买的400块的蒲公英路X5路由器好，之前试过了旧版本的固件，估计是静态ip设置错了，还是该早点试一下最新版本的固件，一直以为是自己的笔记本硬件不支持，看来没有那么高深。

  • 软路由的事情就这样告以段落，接下来该折腾玩客云了,玩客云的速度应该比其他的下载工具是要快一些，还可以当作一个NAS，重新开始使用PotPlayer了，真的是神器，在线播放局域网中的文件，设置播放速度，那么现在
    玩客云的事情也搞完了。

  • 明天开始刷机，刷miui12。

  • 搜素 Halt and Catch Fire 迅雷下载 下载电脑狂人/奔腾年代 美剧，关于硬件开发的美剧，挺喜欢的。

  • 还没睡觉，然后下了个OnePlus通用刷机工具，然后刷了个小米6的高通骁龙835的包，然后开机重启就ok了，刷机也搞完了。目标全部完成，该睡觉了。

reference-site-list

soft router

  • 本文标题：2020-09-26-x
  • 本文作者：Xplorist
  • 创建时间：2020-09-26 13:30:13
  • 本文链接：https://xplorist.tech/2020/09/26/7bd94fd827ed/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论