【Vant Weapp】van-cell 单元格

自定义内容

自定义右侧value（姓名手机号）

自定义右侧value（文件预览）

自定义下方label描述信息

真机border相当明显

修改样式（下边框、文字）

循环列表中的cell

自定义内容

自定义右侧value（姓名手机号）

<van-cell-group><van-cell title="经理"><view>张三<view class="blue">15952011111</view></view></van-cell>
</van-cell-group>

自定义右侧value（文件预览）

<van-cell-group><van-cell title="附件"><view style="color: blue;" bindtap="open">1.doc</view></van-cell>
</van-cell-group>

open() {let url = this.data.urlwx.downloadFile({url: url,success: function (res) {const filePath = res.tempFilePathwx.openDocument({filePath: filePath,success: function (res) {}})}})
}

自定义下方label描述信息

  <van-cell title="电话" use-label-slot ><view slot="label"><view>张三</view><view class="blue">15952086506</view></view></van-cell>

真机border相当明显

<van-cell title="单元格" is-link value="内容"  border="{{ false }}"/>
<van-cell title="单元格" is-link value="内容"  border="{{ false }}"/>
<van-cell title="单元格" is-link value="内容"  border="{{ false }}"/>

修改样式（下边框、文字）

.van-cell {border-radius: 30rpx;margin: 20rpx 0 0 0;
}/* 去除单元格cell下边框 */
.van-cell:after {border-bottom: none !important;border-bottom-style: none !important;
}/* 单元格标题title */
.van-cell .van-cell__title {color: #7186e1;
}/* 标题下方label */
.van-cell .van-cell__label {color: #000;font-weight: 500;
}

循环列表中的cell

model:value在循环列表中无法实现响应式，必须通过onChange重新赋值。

<view class="list"><view class="item" wx:for-items="{{list}}" wx:key='index'><van-cell-group><van-field model:value="{{ item.desc }}" type="textarea" placeholder="请输入描述" autosize border="{{ false }}"data-item="{{item}}" data-index="{{index}}" bind:change="onChange"/></van-cell-group></view>
</view>

onChange(event) {let name = event.detaillet index = event.currentTarget.dataset.indexconst data = 'list['+index+'].desc'this.setData({[data]: name})
},

【Vant Weapp】van-cell 单元格相关推荐

利用vantUI组件库中的Field 输入框、Cell 单元格完成金额数字框的数字转金额格式和金额大写
近期公司的任务需要这个功能,利用vantUI组件库中的Field 输入框.Cell 单元格完成金额数字框的数字转金额格式和金额大写 1.首先写工具类utils.js // 将数字转换成金额千字文格式显 ...
POI导出word中cell单元格内换行问题
利用POI导出word时,换行符"\r\n"无法被正常识别,利用以下方式进行了word中cell单元格内的换行问题. 首先在需要换行字符串的对应位置处插入相应标记符,然后在设置wo ...
vant在cell中加表格_Vant Cell 单元格
引入import Vue from 'vue'; import { Cell, CellGroup } from 'vant'; Vue.use(Cell); Vue.use(CellGroup); ...
vant 做表格_Vant Cell 单元格
引入import Vue from 'vue'; import { Cell, CellGroup } from 'vant'; Vue.use(Cell); Vue.use(CellGroup); ...
pdfpcell输出换行_poi导出Excel（cell单元格里的一串文字，换行显示，设置字体）...
/** * 民主推荐结果导出列表,班子换届 * * @param formBean * @param request * @param response * @param redirectAttrib ...
DataGridView中在新增行时怎样设置每个Cell单元格的字体样式
场景 DataGridView怎样实现添加.删除.上移.下移一行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10281414 ...
NPOI随笔——图片在单元格等比缩放且居中显示
NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary>/// 图片在单元格等比缩放居中显示// ...
【POI xls Java map】使用POI处理xls 抽取出异常信息 --java1.8Group by ---map迭代 -- 设置单元格高度...
代码处理逻辑: 代码流程: 1.首先需要创建一个实体用来存储相关信息 1 package com.sxd.test.unusualName; 2 3 public class NameEntity ...
java读取合并单元格_Java POI常用方法，读取单元格的值，设置单元格格式，合并单元格，获取已合并的单元格，导出至本地等...
一.设置单元格格式. 设置单元格边框.单元格背景颜色.单元格对齐方式.单元格字体,设置自动换行. /** Description: 设置单元格格式. * @author : ys. * @date : ...

【Vant Weapp】van-cell 单元格

自定义内容

自定义右侧value（姓名手机号）

自定义右侧value（文件预览）

自定义下方label描述信息

真机border相当明显

修改样式（下边框、文字）

循环列表中的cell

【Vant Weapp】van-cell 单元格相关推荐

最新文章

热门文章