李维亮_前端开发攻城狮 - admin
type: channel
link: https://www.liweiliang.com/author/1/
description: admin
items: element的tree树形菜单回显、父级设置半选状态
items: ElementUI 中 Table expend嵌套另一个子Table，fixed+嵌套多选实现
items: 解决elementui中el-radio或el-cascader报错：Blocked aria-hidden on an element because its descendant retained focus.
items: 一些有意思的package
items: java 学习笔记
items: vue与flutter交互——vue
items: 双击事件（dblclick）时,不触发鼠标按下(mousedown) 动作事件
items: 利用adb来实现禁用荣耀手机的自动更新
items: 修复uview2.0下表单无法动态校验的问题
items: uniapp中使用复制功能(复制到粘贴板)

element的tree树形菜单回显、父级设置半选状态
type: item
date: 2025-06-10T17:03:00+08:00
description: 主要代码： keyList.forEach(key => { const node = this.$refs.weiTree.getNode(key); console.log(node.isLeaf) if (node.isLeaf) { this.$refs.weiTree.setChecked(node, true); } }); 完整demo <el-dialog title="tree" class="bp-dialog" :visible.sync="treeVisible" width="850px" append-to-body :close-on-click-modal="false"> {{ item.title }} <el-tree ref="weiTree" :data="treeData" :props="defaultProps" show-checkbox node-key="code" default-expand-all :expand-on-click-node="false"> <span v-if="node.label.length<28">{{ node.label }} <el-tooltip v-else placement="top" effect="light"> {{ node.label }} {{ node.label }} </el-tooltip> <el-image v-if="/.(png|jpg|jpeg)$/.test(item.dfsPath)" :src="item.dfsPath" :preview-src-list="[item.dfsPath]"> </el-image> 文件 <el-tag v-if="!data.notCheck">检查</el-tag> <el-tag v-else type="success">只读</el-tag> <el-tag v-if="[1,2].includes(data.checkResultType)"> {{ checkResultTypeObj[data.checkResultType] }} </el-tag> <el-tag v-else type="succcess"> {{ checkResultTypeObj[data.checkResultType] }} </el-tag> {{ data.sort }} </el-tree> <el-button type="primary" @click="handleInit">初始化</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> <el-button @click="handleCancel">取消</el-button> </el-dialog>

ElementUI 中 Table expend嵌套另一个子Table，fixed+嵌套多选实现
type: item
date: 2025-04-28T17:28:00+08:00
description: 比较忙，直接贴代码 <el-button size="mini" @click="handleExpand" class="bp-primary-plain" type="primary" plain>一键展开 </el-button> <el-button size="mini" @click="handlePutAway" class="bp-primary-plain" type="primary" plain>一键收起 </el-button> <el-table ref="tableItemRef" class="bp-table" border :data="tableData"> <el-table-column width="50" fixed="left" align="center"> <el-checkbox v-model="globelCheckedAll" @change="clickCheckAll(scope)" :indeterminate="isIndeterminateAll"></el-checkbox> <el-checkbox v-model="scope.row.isChecked" :indeterminate="scope.row.isIndeterminate" @change="handleSelectionChange(scope.row)"></el-checkbox> </el-table-column> <el-table-column align="center" fixed="left" type="expand"> <el-table class="bp-table" :data="props.row.children" row-key="id"> <el-table-column width="97" align="center"> <el-checkbox v-model="props.row.isChecked" :indeterminate="props.row.isIndeterminate" @change="handleSelectionChange(props.row)"></el-checkbox> <el-checkbox v-model="scope.row.isChecked" @change="clickCheckItemFn(props.row, scope.row)"></el-checkbox> </el-table-column> <el-table-column align="center" prop="" min-width="150" label="" show-overflow-tooltip/> <el-table-column align="center" prop="itemFunction" width="150" label="工步" show-overflow-tooltip/> <el-table-column align="center" prop="potentialFailureMode" min-width="150" label="潜在失效模式" show-overflow-tooltip/> <el-table-column align="center" prop="potentialEffectOfFailure" min-width="150" label="潜在失效影响" show-overflow-tooltip/> <el-table-column align="center" prop="sev" label="严重度" min-width="70" show-overflow-tooltip/> <el-table-column align="center" prop="potentialCauseMechanismOfFailure" min-width="120" label="失效起因/机理" show-overflow-tooltip/> <el-table-column align="center" prop="occur" label="频度" min-width="60" show-overflow-tooltip/> <el-table-column align="center" prop="currentDesignControls" min-width="180" label="现行过程控制" show-overflow-tooltip/> <el-table-column align="center" prop="det" label="探测度" min-w…

解决elementui中el-radio或el-cascader报错：Blocked aria-hidden on an element because its descendant retained focus.
type: item
date: 2025-01-07T15:01:00+08:00
description: 在使用elment中el-radio的时候发现控制台报错，Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. Element with focus: input Ancestor with aria-hidden: ​ 解决方案一：::v-deep input[aria-hidden="true"] { display: none !important; } ::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner { box-shadow: none !important; } 解决方案二：自定义指令 Vue.directive('removeAriaHidden', { bind(el, binding) { const ariaEls = el.querySelectorAll('.el-radio__original') ariaEls.forEach((item) => { item.removeAttribute('aria-hidden') }) } }) 页面使用<el-radio-group v-model="tableRadio" class="new_radio" @change="changeRadio" v-removeAriaHidden></el-radio-group>

一些有意思的package
type: item
date: 2024-05-11T16:55:16+08:00
description: viser-vue可视化插件vue-cropper一个优雅的图片裁剪插件vue-clipboard2复制粘贴插件

java 学习笔记
type: item
date: 2023-11-28T17:38:00+08:00
description: jdk 推荐11.xjava -version第一个程序 hello Worldpublic class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } } int 用来表示一个整数，取值范围在-2^31 ~ 2^31-1,计算出来是-2147483648 ~ 2147473647关键字 public class static void int 表达式（expression）： java 中最基本的一个运算，比如一个加法运算表达式。 1+2是一个表达式 a+b 也是一个表达式语句（statement）: 类似于平时说话时的一句话，有表达式组成，以；结束。int a=3; y=a+9; System.out.println(y); 都是语句。代码块： 一对大括号括起来的就是一个代码块。整数类型：byte 占用1个byte,值域是-128~127short 占用2个byte,值域是-32768~32767int 占用4个byte,值域是-2147483648 ~ 2147483547long 展鸿8个byte,值域是-9223372036854774808~9223372036854774807浮点（小数）类型float占用4个byte,有精度，值域复杂+-340282346638528859811704183484516925440double精度是float的两倍，占用8个byte. java中浮点数缺省是double类型符号位布尔类型和字符串类型boolean 占用1个byte，值域true,false。char 占用2个byte,值域是所有的字符串。整数类型相除只能是整数位移运算符>>: 符号位不动，其余位右移，符号位后边正数补0，负数补1.又称带符号右移。 >>>: 符号位一起右移，左边补0，又称无符号右移 <<: 左移，右边补0.左移没有带符号位一说，因为符号位在最左侧

vue与flutter交互——vue
type: item
date: 2023-10-27T17:38:08+08:00
description: 一. vue向flutter发送消息定义一个方法，在方法内部使用如下语句即可。注意‘MessageDeal’方法名要与flutter端定义的方法名一致MessageDeal.postMessage('4') // 向flutter发送数字4 二. vue接收来自flutter的消息注意‘flutterCallJsMethod’方法名要与flutter端定义的方法名一致暴露方法名// 在挂载时将方法名挂载到window上，把方法名暴露给flutter mounted() { window.flutterCallJsMethod = this.flutterCallJsMethod } 2.在methods中定义同名方法flutterCallJsMethod(message) { // message是flutter发送来的消息 if (message==='back') { this.showSharePage = false } }

双击事件（dblclick）时,不触发鼠标按下(mousedown) 动作事件
type: item
date: 2023-10-20T11:42:29+08:00
description: 在一个dom节点的事件绑定中，如果同时绑定了dblclick和mousedown那么想要执行双击事件(dblclick)时能就会触发两次mousedown事件。在说mousedown就不得不说下 click事件click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。dblclick事件则会在mousedown、mouseup、click之后触发。mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。在单击的时候（也就是鼠标按下的时候）不会执行双击，但是双击的时候会执行两次单击再执行双击事件。解决的思路：要想双击时不执行单击事件，就使用定时器清除掉两个单击事件，留下一个双击事件。解决思路，使用setTimeout//data定义变量 data(){ return{ timeOut: null } } {{ item.name }} handleMousedown(event, node, index) { clearTimeout(this.timeOut); // 清除第一个鼠标单击按下事件 this.timeOut = setTimeout(() => { console.log(event.target, 'handleMousedown dom'); console.log('handleMousedown', event.offsetX, event.clientX); }, 200) }, handleDblclick(event, item) { clearTimeout(this.timeOut) console.log(event.target, 'handleDblclick'); }, 关于实现原理 在setTimeout 中的 time=200，大家知道js的事件循环机制，点击事件会添加一个任务队列。time=0， 也会添加一个任务队列。那么time=0与time=200有什么区别呢？因为第一次单击事件后，主线程没有任何任务，就会立马执行这个单击事件的任务。待第二次单击的时候，假设距离第一次单击事件是150ms, 如果你的定时器小于150ms, 那么第一次的任务队列就会执行完。要想不执行第一次的任务队列，那么定时器时间间隔就必须大于两次单击的时间间隔了。这样才能清除第一次的单击事件，所以，这个200是酌情值，大于间隔就行。第一次单击任务不执行了，是被定时器延时，然后第二次点击的时候给清除了。那么第二次点击事件呢？在两次单击之后，会立马执行一个双击事件，双击事件的一开头就把这个第二次点击事件给清除了。至此两个单击时间全部被清除了。

利用adb来实现禁用荣耀手机的自动更新
type: item
date: 2023-09-14T22:26:30+08:00
description: 昨天搞了台荣耀60pro的手机，看中了手机的屏幕，真的很不错，虽然配置很垃。经过测试发现基本上和华为有异曲同工之妙，但是通过查询发现新版的Magic 6.x => 7.x 系统好像问题不少不敢升级尤其是断流及手机耗电，所以果断先折腾一波最新adb 下载请请输入链接描述点击这里一、老样子去荣耀官网下载个荣耀助手来安装下驱动接下来打开开发者模式，明细请参考原来写的文章传送门接下来直接上命令，发现报错了，adb shell pm disable-user com.huawei.android.hwouc 二、思考了下感觉应该是荣耀把包名字改了，然后使用查看包名命令查找下发现应该改成com.hihonor.ouc了adb shell pm list package 三、接下来使用禁用命令adb shell pm disable-user com.hihonor.ouc来停止系统更新四、成功搞定，最后发现还有一些无法卸载的包使用下面命令来进行卸载，最最后一步吧打开的开发者选项恢复重置下adb shell pm uninstall --user 0 xxx //包名

修复uview2.0下表单无法动态校验的问题
type: item
date: 2023-08-31T17:07:26+08:00
description: 1.uview小程序必须在onReady下加上一行设置规则的方法onReady() { // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。 this.$refs.uForm.setRules(this.rules) }, 2.动态使用，v-for需要放在u-form下的view下面3.u-form-item中的表单必须改为 :prop="tableData.${index}.requestQty"4.在data中先配置校验规则rules和循环列表同名的tableData数组，然后增加动态增加的规则orderRules对象且校验触发方式trigger中新增['input', 'blur', 'change']rules: { tableData: [] }, orderRules: { requestQty: {type: 'number', required: true, message: '请输入数量', trigger: ['input', 'blur', 'change']}, faultDescription: {type: 'string', required: true, message: '请填写故障信息', trigger: ['input', 'blur', 'change']} }, 5.表单完整代码<u--form labelPosition="left" :model="orderForm" :rules="rules" labelWidth="100%" ref="uForm"> <view class="confirmBox" v-for="(item, index) in orderForm.tableData" :key="index"> <u-table stripe width='340' fontSize="10" padding="10px 3px"> <u-tr> <u-th width="80">订单号</u-th> <u-th width="130">产品描述</u-th> <u-th width="80">发货日期</u-th> <u-th width="50">数量</u-th> </u-tr> <u-tr> <u-td>{{ item.saOrderNo }}</u-td> <u-td>{{ item.prodDescription }}</u-td> <u-td>{{ item.deliveryDate }}</u-td> <u-td>{{ item.dlvQty }}</u-td> </u-tr> </u-table> <view class="confirm_desc"> <view class="desc_num"> <u-form-item label="数量" :prop="`tableData.${index}.requestQty`"> 数量 <u-number-box v-model="item.requestQty" :min="0" :max="9999" color="#666" buttonSize="12" bgColor="transparent" iconStyle="color:#D6D6D6;font-size:12px;width:15px;" @change="requestQtyChange($event,item)"></u-number-box> </u-form-item> </view> <view class="desc_fault"> <u-form-item label="故障信息" :prop="`tableData.${index}.faultDescription`"> 故障信息 <u--input v-model="item.faultDescription" placeholder="请输入内容" fontSize='12' suffixIcon="arrow-right" suffixIconStyle="color: #00BAAD" clearable @change="faultDesChange"></u--input> </u-form-item> </view> </view> </view> </u--form> 6.重点，需要修改uview下的u-form组件,路径(node_modules/uview-ui/components/u-form)，因为再将校验改为数组后，const rule = this.formRules[child.prop];无法找到rule，如 child.prop=‘tableData.0.requestQty’，rule…

uniapp中使用复制功能(复制到粘贴板)
type: item
date: 2023-08-23T13:59:04+08:00
description: 最近使用uniapp开发，想做个发邮件的功能，感觉有点繁琐，所以就用自动复制邮箱到粘贴板，实现方式如下uni.setClipboardData({ data: '406320591@qq.com', success: () => { console.log('success'); uni.showToast({ title: '复制成功', icon: 'none' }); } });