vux radio 改造为 tree 代码片段

思路:用全角空格和半角空格做区分。
1、自己写的部分

 this.toOptions = arr.map(x => {let kong = ''for (let i = 1; i < x.level; i = i + 1) {kong = kong + ' '}kong = kong + ' 'let icon = 'https://s1.ax1x.com/2018/09/27/iML0BD.png'if (x.level === 1) {icon = 'https://s1.ax1x.com/2018/09/27/iMLwnO.png'}return {icon: icon,key: x.key,value: kong + x.value + `${x.level}`}})

2、vux的popup-radio组件改造部分

<slot name="each-item" :icon="props.icon" :label="props.label" :index="props.index"><p><span>{{ props.label.split(' ')[0] }}</span><img class="vux-radio-icon" :src="props.icon" v-show="props.icon"><span class="vux-radio-label">{{ props.label.split(' ')[1] }}</span></p>
</slot>

最后效果
在这里插入图片描述

没有怎么改动vux的源代码,只是投机取巧加入了各种空格解决这个问题。效果打到预期了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

maven已支持支付宝开放平台SDK

「好消息通知」开放平台SDK 标准版 以官方的名义上传了中央仓库&#xff01;支持maven引入调用&#xff01;开发者可以参考使用中央仓库地址&#xff1a;https://mvnrepository.com/artifact/com.alipay.sdk/alipay-sdk-java 后续在 https://docs.open.alipay.com/54/103419/ …

工作99:任务加1逻辑

/*控制任务的添加功能*/addFrom(index,item) {var tasks {name: "",start_time: null}this.form.departmentList[index].accounts[item].tasks.push(tasks);},

支付宝后台如何查看自己的签约详情

第一步&#xff1a;登录蚂蚁金服商家服务中心https://b.alipay.com/&#xff0c;点击产品中心&#xff0c;如下图第二步&#xff0c;点击我的产品-已生效-产品详情&#xff0c;&#xff08;如果在已生效界面看不到自己调用接口对应签约的产品&#xff0c;那么你的签约已经失效&…

ALIN10129-自查方案

原贴地址&#xff1a;https://openclub.alipay.com/read.php?tid3374&fid60&#xff0c;欢迎大家访问 报错说明及截图&#xff1a;这个错误一般常见于支付宝老版本的移动支付mobile.securitypay.pay接口中错误原因&#xff1a; 移动支付接口没有权限&#xff08;也就是这个…

实现Repeater控件的记录单选(二)

前一篇《实现Repeater控件的记录单选》http://www.cnblogs.com/insus/p/7426334.html 虽然可以实现对Repeater控件的记录进行单选&#xff0c;但是&#xff0c;你需要懂得写正则表达式和需要写C#程序重写。好吧&#xff0c;方法也许往往不止一种。 先去掉重写的代码&#xff1a…

HAS_NO_PRIVILEGE解决方案

报错信息如下&#xff1a;错误原因&#xff1a; 1、没有签约这个接口的合同 &#xff01; 2、签约了相应的接口合同&#xff0c;但没有生效 &#xff01; 3、签约过期导致&#xff0c;如果你之前都可以使用对应的接口&#xff0c;但是近期使用就报错这个&#xff0c;一般就是…

World从任意页开始设置页码详细教程

我这边使用world建了5页&#xff0c;以此来细说如何使用World从任意页开始设置页码&#xff0c;以下为详细教程 首先&#xff0c;假设你从第三页开始设置页码&#xff0c;那么你的需求是将第三页设置为页码1&#xff0c;第四页为页码2&#xff0c;以此类推&#xff0c;具体的操…

支付宝生成RSA密钥,上传应用公钥的完整流程

首先我们去官方下载【密钥生成工具】&#xff0c;根据自己的电脑操作系统进行选择下载&#xff0c;我这里以Windows为例&#xff01; 这里建议大家直接下载放在电脑桌面&#xff0c;不要放在任何文件夹下&#xff01; 下载该工具后&#xff0c;解压打开文件夹&#xff0c;运行“…

Cpython解释器支持的进程与线程

一、理论部分 一 什么是进程 进程&#xff1a;正在进行的一个过程或者说一个任务。而负责执行任务则是cpu。 举例&#xff08;单核多道&#xff0c;实现多个进程的并发执行&#xff09;&#xff1a; egon在一个时间段内有很多任务要做&#xff1a;python备课的任务&#xff0c;…

.NET深入实战系列—Linq to Sql进阶

.NET深入实战系列—Linq to Sql进阶 最近在写代码的过程中用到了Linq查询&#xff0c;在查找资料的过程中发现网上的资料千奇百怪&#xff0c;于是自己整理了一些关于Linq中容易让人困惑的地方。 本文全部代码基于&#xff1a;UserInfo与Class两个表&#xff0c;其中Class中的U…

多主机Docker容器的VLAN划分

原文发表于cu&#xff1a;2016-06-06 参考文档&#xff1a; Docker网络的4种模式&#xff0c;pipework/ovs的简单使用等&#xff1a;http://www.infoq.com/cn/articles/docker-network-and-pipework-open-source-explanation-practice Dockerpool全文档&#xff1a;https://yea…