1.vue中配置websocket连接 data中添加属性 socket: null, 配置websocket连接信息 if (typeof (WebSocket) === 'undefined') { this.$message({ message: '您的浏览器不支持socket', type: 'error' }) } else { // 实例化socket this.socket = new WebSocket('ws://10.111.106.73:80//ws/webSocketServer.do') // 监听socket连接 this.socket.onopen = this.openSocket // 监听socket错误信息 this.socket.onerror = this.errorSocket // 监听socket消息 this.socket.onmessage = this.getMessageSocket // 关闭socket消息 this.socket.onclose = this.closeSocket } 配置连接打开关闭和获取信息的方法 .... 有更新! nginx配置websocket连接 程序人生
1.标签设置 添加标签template,slot-scope设置为scope,slot设置为menu 内部就可以添加按钮和自己想要的属性了 <avue-crud ref="thresholdSetTable" :data="pageData" :option="option" :page.sync="page" @selection-change="selectionChange" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange" @search-reset="searchReset" > <template slot="search"> <el-form-item label="指标名称"> <el-input v-model="searchForm.indexName" placeholder="请输入指标名称" size="small" /> </el-form-item> </templa.... 有更新! avue.js表格添加行内操作按钮 程序人生
1.创建表格,添加搜索条件 <avue-crud ref="indexDistributionTable" :data="pageData" :option="option" :page.sync="page" @selection-change="selectionChange" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange" @search-reset="searchReset" > <template slot="search"> <el-form-item label="指标名称"> <el-input v-model="searchForm.indexName" placeholder="请输入指标名称" size="small" /> </el-form-item> </template> </avue-crud 表格的其他属性此前已经有对应的文章了(avue.js表格.... 有更新! avue.js表格添加搜索条件 程序人生
1.定义avue-crud <el-dialog :visible.sync="detailDialog" title="明细" top="100px" width="90%"> <avue-crud ref="detailTable" :data="detailData" :option="detailOption" :page.sync="detailPage" :over-hidden="true" @size-change="detailTableSizeChange" @current-change="detailTableCurrentChange"> <div slot="footer" class="dialog-footer"> <el-button @click="detailDialog = false">确 定</el-button> </div> </avue-crud></el-dialog> 2.属性配置 detailDialog控制显示 :data="det.... 有更新! avue.js 表格 程序人生
1.el-tree属性设置 <el-tree ref="orgTree" :style="{height:autoHeight,'overflow':'auto'}" :props="orgTree.defaultProps" :load="loadOrgChildren" node-key="id" lazy class="filter-tree"> <span slot-scope="{ node, data }" class="custom-tree-node"> <span v-if="node.label.length < 10"> {{ node.label }} </span> <el-tooltip v-else :content="node.label" class="item" effect="dark" placement="top-start"> <span > {{ node.label | ellipsis(10) }} </span> </el-tooltip&.... 有更新! element-ui 树形表格懒加载 程序人生