要命的table行内回填 我们的业务场景之一，是在一个结果列表页的结果列表中，点击任意一行row中的button，弹出抽屉或者嵌套了form表单的dialog，显然，通过<template slot-scope="scope">可以拿到行内数据，button代码：
<el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" /> 这里click的方法如下：
handleEdit(index, row) { console.log(row) if (row.cron === '0 4 * * *' || row.cron === '0 4 * * 0' || row.cron === '0 4 1 * *') { this.cron_radio = row.cron } else { this.cron_radio = '' } this.post_data = row this.dialog = true }, 这里的this.post_data，就是vue实例上的双向绑定的form表单数据，这段代码的作用是：经过一些业务层面的判断（if-else）后，把行内数据赋值给表单，这样就达到了编辑回填的效果，用户可以直接编辑或者重新提交，能大大节省重复操作数据的时间！
可是我想得太天真了 当我this.post_data = row如此赋值的时候，我发现后续在form中编辑数据，table中当前行的数据也在变！！我隐约感觉到是对象引用的问题，可是，如何解除引用？
经过一番波折，大概有三种方法可以解决：
将row中的每个字段分别赋值给this.post_data
row对象转字符串再解析出来this.post_data = JSON.
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 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.
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) }).
需求 业务有个很常用的场景是渲染一个结果列表页时，后端返回的状态码一般只能是数字
但我们在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.
起因 原本并不需要考虑这种形式，但是无奈后端提供的接口数据并没有描述相关的配置项。
需求是在一个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" /> .
