vant在cell中加表格_在vant 中使用cell组件 定义图标该图片和位置操作

@本来想直接使用icon组件，使用阿里的图标库，可是怎么弄也不行，折腾一下午，最后决定使用最笨的办法，直接上代码

vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样

二级经营单位

//css样式，给cell部分从新定义了css样式

.van-cell__value {

color: #e6210c;

font-weight: bold;

font-size: 1rem;

overflow: hidden;

text-align: right;

line-height: 3.0625rem;

flex: 1;

position: relative;

vertical-align: middle;

}

.van-cell__title{

position: relative;

flex: 2;

}

.c1{

width: 0.625rem;

height: 0.625rem;

}

.van-cell__label[data-v-5ff568b8] {

font-size: 1rem;

line-height: 1.1rem;

padding-left: 4.3rem;

}.custom-text{

font-size: 1.2rem;

margin-left: 4.3rem;

}

主要百度上的方法都试过了，实在没有办法。

补充知识：vant Grid组件图片加载问题 无法加载本地图片解决方案

我们引入图片直接用官网给的icon来加载案图片

v-for="(item,index) in gridtextlist"

:key="index"

:text="item.text"

:icon="item.photo"

/>

{{item}}

然后我们图片地址得用require包一下

gridtextlist:[

{

text:"女性专区",

icon:"n",

photo:require('../assets/cyimages/images/1indexjg1_05.png')

},

{

text: "无醇",

icon:"w",

photo:require('../assets/cyimages/images/1indexjg2_05.png')

},

{

text:"聚会畅想",

icon:"j",

photo:require('../assets/cyimages/images/1indexjg3_05.png')

},

{

text:"关于爱情",

icon:"g",

photo:require('../assets/cyimages/images/1indexjg4_05.png')

},

{

text:"火锅绝配",

icon:"h",

photo:require('../assets/cyimages/images/1indexjg5_05.png')

},

{

text:"套餐推荐",

icon:"template",

photo:require('../assets/cyimages/images/1indexjg6_05.png')

},

{

text:"送礼服务",

icon:"scoped",

photo:require('../assets/cyimages/images/1indexjg7_05.png')

},

{

text:"侍酒专区",

icon:"sh",

photo:require('../assets/cyimages/images/1indexjg8_05.png')

},

]

以上这篇在vant 中使用cell组件 定义图标该图片和位置操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。