Vue Eltablecolumn Buttonloading

element-ui中table-column的button按钮loading状态 在我们的项目中,往往需要在一个列表页里展示全部的数据,每一行展示各种数据; 但是由于是测试工具,所以经常需要在每一行中嵌入按钮,通过<template slot-scope="scope">来让每行的button获取它所在行的全部数据,从而提取这一行中的某个字段,继而发出ajax请求,column代码示例如下: <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="success" :loading="launchLoading === scope.row.task_id" @click="handleLaunch(scope.row.task_id)" >启动</el-button> <el-button size="mini" type="danger" :loading="stopLoading === scope.row.task_id" @click="handleStop(scope.row.task_id)" >停止</el-button> <el-button size="mini" type="warning" plain @click="handleCopy(scope.row.task_id), goAdd()" >复制</el-button> </template> </el-table-column> 这里的操作是:按下这一行的按钮,它会获取这一行的task_id,并作为形参传递给绑定的click方法@click="handleLaunch(scope.row.task_id) 如果只是为了传递正确的data,其实这里已经完成了操作,但是为了用户体验,往往需要在按钮上再绑定loading状态,element官方示例如下: 要设置为 loading 状态,只要设置loading属性为true即可。 <el-button type="primary" :loading="true">加载中</el-button> 那么只要通过控制:loading绑定的值,就可以手动控制按钮的loading效果啦! 但是!!!如果这个按钮在table中,直接绑定的结果是点击任何一行的按钮,全部的按钮都在转圈圈,看起来极其愚蠢0.0 曾经我的解决方法是让后端返回的数据里,每一行都加入一个loading字段,默认是false,之后每一行中都可以获取到,那么当我按下这一行的按钮,同时修改为true就可以控制只有当前焦点的button有loading圈圈了。 可是这样还是很蠢啊。 后来在开发同事的启发下,el-table-column部分如前面所示,在data()中设置launchLoading布尔值,默认false,绑定的click方法如下: handleLaunch(task_id) { this.launchLoading = task_id // 启动 var data = { task_id: task_id } console.log(data) reqRtcLaunch(data).then((result) => { // console.log(result) this.$message({ message: '启动成功O(∩_∩)O~', type: 'success' }) this.

阅读全文

H5ai

h5ai安装和配置 h5ai官网 h5ai Github 环境要求 nginx或者Apache,我的环境是mac + nginx; php,mac用户直接brew install php即可; 目录结构如下 DOC_ROOT ├─ _h5ai ├─ your files └─ and folders nginx配置文件 mac本机用brew安装nginx后,默认配置文件地址为: /usr/local/etc/nginx/nginx.conf 修改默认配置: #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.

阅读全文

Vue Vuesocketio

VueSocketio的前端实现与大坑 前端实现 首先,如果全局初始化socket实例的话,在main.js中声明即可。 以下是在具体vue组件中使用的情况: import VueSocketio from 'vue-socket.io' import Vue from 'vue' Vue.use(new VueSocketio({ debug: true, // connection: 'ws://10.60.82.83/lptslog', connection: req_url_us_ws + '/lptslog', options: { // path: '/lptslog', autoConnect: false, transports: ['websocket', 'xhr-polling', 'jsonp-polling'] } })) 这个Vue-Socket.io官方文档并没有提到*transports*是干啥的,它给的例子是: import Vue from 'vue' import store from './store' import App from './App.vue' import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: 'http://metinseylan.com:1992', vuex: { store, actionPrefix: 'SOCKET_', mutationPrefix: 'SOCKET_' }, options: { path: "/my-app/" } //Optional options })) new Vue({ router, store, render: h => h(App) }).

阅读全文

vue过滤器之样式绑定

需求  业务有个很常用的场景是渲染一个结果列表页时,后端返回的状态码一般只能是数字  但我们在table中渲染的时候只渲染数字显然并不能很直观的反馈给使用者,所以结合tag的type属性绑定,就能配合过滤器来实现颜色标识和文本映射,体验明显更好~ vue代码 首先vue实例中定义过滤器~ export default { // -1失败 0未启动 1运行中 2运行完成 3记录不存在 filters: { statusFilter(status) { const statusMap = { '-1': '失败', '0': '未启动', '1': '运行中', '2': '运行完成', '3': '记录不存在' } return statusMap[status] }, typeFilter(status) { const statusMap = { '-1': 'danger', '0': '', '1': 'success', '2': 'info', '3': 'warning' } return statusMap[status] } }, } 模板代码 之后在模板里使用就好啦! <el-table-column label="状态" prop="status" width="100" > <template slot-scope="scope"> <el-tag :type="scope.

阅读全文

vue-element-ui下拉框返回对象

起因  原本并不需要考虑这种形式,但是无奈后端提供的接口数据并没有描述相关的配置项。 需求是在一个form中的select被选择后(具体数据是一个IP地址),以popover的形式显示包含这个IP地址的对象的全部信息。众所周知,select中的option备选项是一个数组,比如我在created()阶段收到的数组元素之一如下: { host_name: "第一台测试服务器", host_type: 0, id: 1, location: "香港", private_ip: "10.78.100.5", public_ip: "100.100.100.100:9527" } 处理选择  那么很显然,在option标签中,使用v-for取出item就可以渲染出这些备选项,而select组件已经为我们绑定了表单数据,在之前定义的:value=“item.public_ip”就代表填充到表单里的值,是我要的IP地址。  但是数据预览的需求是,不仅要看到IP地址,还要看到host_name、host_type、id这些json数组对象中的其他信息,  可是并没有提供映射的配置信息,所以我···用到了: :value=“item” 可是这里要注意,此时的item是一个对象,那么在外层的select中,要添加这个属性 value-key=“public_ip” 值应该是item对象里的唯一值,不然你连编译都别想过~  那么现在点击了选项后,select会把数据绑定在我定义的中间变量里 selected_center_or_edge_hosts  本来这个变量应该是直接在form表单变量中的数组就可以了,但是为了存下所有的item信息,并且提交表单的时候, 后端哥也懒得处理解析json中的IP地址—总之就是让我多解析一步都不行···  于是就想了一个折中的这个变量,选中的所有值都给它给它给它!  所以我绑定了一个方法,当选择的值发生变化,就会执行里面的动作: 1、先给select绑定方法,传递事件: @change=“change_selected_center_or_edge_hosts($event)” 2、之后定义执行动作: change_selected_center_or_edge_hosts(e) { this.form.center_or_edge_hosts = this.selected_center_or_edge_hosts.map(x => { return x.public_ip }) // 生成数组 } 这里就很明显了,我把选中的item数组中的public_ip取出来,赋值给了form表单里的原本该传的数组。 处理预览  至于预览,在select外层包裹一个popover + table的组件就可以了,但是这样的话一定要记得在select上添加这个属性: slot=“reference” 不然你别想再看到你的select选择器了! 提交请求后的清空处理  当执行了onSubmit之后,正常只要将this.form置空就行了,但是由于有selected_center_or_edge_hosts的存在,  所以我们也要将它置空,而这个需求其实还会要求当一个form中的radio-group切换时,这个select的备选选项数组也要变,所以在切换radio的时候,它的change方法里,也要置空selected_center_or_edge_hosts,不然你休想提交正确的信息了! vue代码 <el-form-item label="填坑的文本标题" prop="center_or_edge_hosts" > <el-popover placement="top-start" trigger="hover" width="800" > <el-table :data="selected_center_or_edge_hosts"> <el-table-column width="50" property="id" label="id" /> .

阅读全文

Adb

ADB命令(Android Debug Bridge) 显示系统中全部设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 安装一个apk adb install -r (APK路径) -r 代表如果apk已安装,重新安装apk并保留数据和缓存文件。apk路径则可以直接将apk文件拖进cmd窗口,记得加空格 直接卸载 adb uninstall (apk包名) 卸载 app 但保留数据和缓存文件 清除应用数据与缓存 adb shell pm clear (apk包名) 强制停止应用 adb shell am force-stop (apk包名) 重启设备 adb reboot 删除文件 adb shell cd sdcard/model/book ls rm -r 415 pull和push文件 adb push (文件路径) (想要push的路径) adb pull (文件路径) (想要pull的路径) 查看日志 adb logcat -v threadtime 过滤日志 adb logcat -v threadtime | grep (关键字) 投屏(用于电脑控制设备) 打开vysor adb shell am start -n com.

阅读全文

作者的图片

CooperHsu

苦逼热力测绘院

测试经理*全栈测开*打杂

望京甘道夫