1、父组件向子组件传递参数 父组件向子组件传递参数，通过props处理,属性是驼峰命名 props属性的类型有多个，常用的有下面几个[String,Number,Boolean,Array,Object,Function,Promise]等 如果传递的参数类型是Object，那么在父组件中修改这个Object的属性，子组件中也会跟着修改； eg: 子组件定义（名称ContractFileAttachment）： props: { contractId: { type: String, required: true } } 父组件传递： <ContractFileAttachment :contract-id="currentContractId" /> 2、子组件调用父组件方法 子组件使用$emit调用父组件定义的方法 eg: 父组件定义一个方法，并且在父组件中引入子组件的时候，用@声明调用 <AddForm :level-array="levelArr" :state-array="stateArr" @addSuccess="addSuccess" @clo.... 有更新！ VUE父子组件通信 程序人生
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 树形表格懒加载 程序人生
问尤龙の时光