精华内容
下载资源
问答
  • Vant Cell 单元格
    千次阅读
    2020-12-19 14:13:39

    引入import Vue from 'vue';

    import { Cell, CellGroup } from 'vant';

    Vue.use(Cell);

    Vue.use(CellGroup);

    代码演示

    基础用法

    Cell可以单独使用,也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框

    单元格大小

    通过size属性可以控制单元格的大小

    展示图标

    通过icon属性在标题左侧展示图标

    只设置 value

    只设置value时,内容会靠左对齐

    展示箭头

    设置is-link属性后会在单元格右侧显示箭头,并且可以通过arrow-direction属性控制箭头方向

    页面导航

    可以通过url属性进行 URL 跳转,或通过to属性进行路由跳转

    分组标题

    通过CellGroup的title属性可以指定分组标题

    使用插槽

    如以上用法不能满足你的需求,可以使用插槽来自定义内容

    单元格

    标签

    slot="right-icon"

    name="search"

    style="line-height: inherit;"

    />

    垂直居中

    通过center属性可以让Cell的左右内容都垂直居中

    API

    CellGroup Props参数说明类型默认值title分组标题string-

    border是否显示外边框booleantrue

    C

    更多相关内容
  • vue实现简单表格组件

    千次阅读 2020-12-19 14:13:39
    本来想这一周一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配...

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变。下面我会以一个简单的案例来说

    第一步:构建一个简单的vue项目,老规矩直接在命令行输入

    vue init webpack myproject

    cd my vue

    cnpm/npm install

    cnpm/npm run dev

    执行结果如下

    然后你会在8080端口看到vue的标志页面

    第二步:分析目录结构 主要是组件入口app.vue和main.js

    第三步:写页面

    我们在app.vue下这样写

    export default {

    data () {

    return {

    }

    },

    components: {

    }

    }

    在main.js中这样写

    import Vue from 'vue'

    import App from './App'

    import Home from './pages/Home.vue'

    import VueRouter from 'vue-router'

    import 'bootstrap/dist/css/bootstrap.css'

    Vue.use(VueRouter)

    const routes = [{

    path: '/',

    component: Home

    }]

    const router = new VueRouter({

    routes

    })

    /* eslint-disable no-new */

    new Vue({

    el: '#app',

    router,

    template: '',

    components: { App }

    })

    main.js主要包括模块导入以及组件导入和注册,路由配置,当然路由配置可以单独写出来。

    由上面的路由配置可以知道当path为‘/’时候,我们渲染到app.vue中的页面为home.vue页面,如下

    这个是路由对应的页面,下面就是一个表格组件

    import table from '../components/table.vue'

    export default {

    data () {

    return {

    }

    },

    components: {

    tableCom: table

    }

    }

    其中import table from '../components/Hello.vue'表示导入这个table组件到home.vue页面

    但是只导入而没有注册这个组件是无效的,就好像定义了一个函数而没有执行。所以我们需要注册这个组件

    也就是components:{tableCom: table}意思是自定义一个tableCom标签来映射这个组件,但是vue规定但标签名过长的时候,需要以分开方式去写比如tableCom 要写成table-com.

    这样就完成了一个组件的导入和注册,下面我们来完成这个组件

    table.vue界面如下

    用户管理

    序号用户名年龄毕业学校操作

    {{index+1}}{{user.name}}{{user.age}}{{user.school}}removeinsert

    export default {

    name: 'hello',

    data () {

    return {

    user: {'name': '', 'age': '', 'school': ''},

    users: [

    {'name': '李磊', 'age': '25', 'school': '洛阳理工'},

    {'name': '张成', 'age': '23', 'school': '桂林电子科技'},

    {'name': '炼心', 'age': '22', 'school': '江西电子科技'}

    ]

    }

    },

    methods: {

    insert: function () {

    this.users.push(this.user)

    },

    remove: function (index) {

    this.users.splice(index, 1)

    }

    }

    }

    h1, h2 {

    font-weight: normal;

    }

    ul {

    list-style-type: none;

    padding: 0;

    }

    li {

    display: inline-block;

    margin: 0 10px;

    }

    a {

    color: #42b983;

    }

    tr,th{

    text-align:center;

    }

    这个组件实现了简单的增删功能,主要是对data数据的修改,我们要明白,我们平常使用的jquery只是对dom节点的操作,比如我们要改变一个数据我们就要首先获取dom然后通过jquery的方法来获取值,而vue则不然它是对data数据进行操作,数据双向绑定,数据改变则视图改变,同样视图改变则数据改变。

    到最后我们看到的效果是这样的

    大家有什么问题可以联系我,或者留言

    大家也许也发现了这样操作data太繁琐,有没有简单的方式呢,有,那就是vuex 就像一个仓库提供你需要的数据。下一章节我会开始对vuex的使用做个总结,希望想了解更多的朋友关注我,谢谢你们的支持。

    展开全文
  • 拉取历史记录,并在前端无限下拉展示,是一个非常常见的使用场景。最近在使用的 Vant (轻量、可靠的移动端 Vue 组件库),实现起来就非常方便。模板实现代码v-model="loading":finished="finished"finished-text=...

    拉取历史记录,并在前端做无限下拉展示,是一个非常常见的使用场景。

    最近在使用的 Vant (轻量、可靠的移动端 Vue 组件库),实现起来就非常方便。

    模板实现代码

    v-model="loading"

    :finished="finished"

    finished-text="暂无更多数据"

    @load="load_more_items"

    >

    v-for="item in items"

    :key="item"

    :title="item.name"

    :value="item.created_at"

    />

    Vue.js 实现代码

    new Vue({

    el: '#app',

    data: {

    items: [],

    finished: false,

    loading: false,

    offset: 0,

    page: 0,

    limit: 10,

    },

    mounted: function() {

    this.fetch_items();

    },

    methods: {

    load_more_items: function() {

    this.page += 1;

    this.offset = this.limit * this.page;

    this.fetch_items();

    },

    fetch_items: function() {

    var that = this;

    $.ajax({

    url: `/api/get_items?offset=${this.offset}&limit=${this.limit}`,

    type: 'get',

    dataType: 'json',

    success: function(data) {

    that.loading = false;

    if (data.data.length) {

    that.items.push(...data.data);

    } else {

    that.finished = true;

    }

    }

    });

    }

    }

    });

    展开全文
  • 这里可以看到获取到的id值 二、含有checkbox多选框 (含搜索框) 对以上进行改造,点击放大镜,弹出以下界面: vant开发指南:https://vant-contrib.gitee.io/vant-weapp/ 1、popup弹出层功能 { username }}" ...

    一、含有checkbox多选框 (不含搜索框)

    结果样式如下:

    wxml文件(样式可以自己修改)

    <view class="table">
      <view class="tr">
         <view class="th">商品名称</view>
         <view class="th">商品编号</view>
         <view class="th">商品数量</view>
      </view> 
    
      <van-checkbox-group value="{{ result }}" data-key="result3" bind:change="onChange">
       <view wx:for="{{list}}" wx:key="index" name="{{ item }}"> 
          <van-checkbox shape="square" name="{{item.id}}"> 
           <view class="tr">
             <view class="td">{{ item.goodsName}} </view>
             <view class="td">{{ item.goodsNo }} </view>
             <view class="td">{{ item.goodsCount }}</view>
           </view>
          </van-checkbox>
       </view>
      </van-checkbox-group>
    </view>

    js文件

    Page({
       data: {
          result: [],
          goodsNo: '',
          list:[
            {id:12, goodsName:"衬衣", goodsNo:"GX2123432-01",goodsCount:"1"},
            {id:13, goodsName:"裤子", goodsNo:"GX234234T-02",goodsCount:"1"} ,
            {id:14, goodsName:"鞋帽", goodsNo:"GX2234422-03",goodsCount:"1"} ,
          ]   
      },onChange(event) {
        console.log(event)
        console.log(event.detail)
        const { key } = event.currentTarget.dataset;
        console.log(this.data.list)
        this.setData({ [key]: event.detail });
        this.data.goodsNo = event.detail+",";
      }
    });

     这里可以看到获取到的id值

     

    二、含有checkbox多选框 (含搜索框)

    对以上进行改造,点击放大镜,弹出以下界面:

    vant开发指南:https://vant-contrib.gitee.io/vant-weapp/

    1、popup弹出层功能

    <van-field value="{{ username }}" label="商品编号" placeholder="请选择商品编号" clearable right-icon="search" 
    right-icon-class="custom-icon" required bind:click-icon="showBasic"  />
    <van-popup
          show="{{ showT.basic }}"
          custom-style="padding: 10px;width:100%; height:80%;"
          bind:close="hideBasic"
        >
    Page({
       data: {
          show: false,
          showT: {
            basic: false,
          },
       },
      toggle(type, showT) {
        this.setData({
          [`showT.${type}`]: showT
        });
      },
      showBasic() {
        this.toggle('basic', true);
      },
      hideBasic() {
        this.toggle('basic', false);
      },
    })

    2、搜索框search 功能

    <van-search
        model:value="{{ value }}"
        label="商品编号"
        placeholder="请输入搜索关键词"
        use-action-slot
        bind:search="onSearch"
       >
       <view slot="action" bind:tap="onClick">搜索</view>
    </van-search>
    //自行修改
    value: '',
    
    onSearch() {
        if (this.data.value) {
          console.log("--->" + this.data.value)
          wx.showToast({
            title: '搜索:' + this.data.value,
            icon: 'none'
          });
        }
      },
      onClick() {
        if (this.data.value) {
          console.log("===>" + this.data.value)
          wx.showToast({
            title: '搜索:' + this.data.value,
            icon: 'none'
          });
        }
      },
     searchBtn:function(){
        const str = this.data.goodsNo;
        const goodsNoVal = str.substring(0,str.length-1);
        this.setData({
          goodsNo: goodsNoVal
        });
        console.log(goodsNoVal);
        this.toggle('basic', false);
      },

    3、底部按钮 

    <view class="footer">
        <van-button size="small" bindtap="hideBasic">关闭</van-button>
        <van-button size="small" type="danger" bindtap="searchBtn">确认</van-button>
    </view>

    4、中间内容区域

    该区域如果文本过多,会出现滚动条,附带标题th及搜索框一起滚动。如果只滚动内容,不滚动标题,单纯设置高,不起作用。故加scroll-view。

    <scroll-view scroll-y="true" style="height: 60%">
            <view class="contentStyle">
              <van-checkbox-group value="{{ result3 }}" data-key="result3" class="groupStyle" bind:change="onChange">
                <view class="columVal">
                  <view wx:for="{{list}}" wx:key="index" name="{{ item }}"> 
                    <van-checkbox shape="square" name="{{item.id}}"> 
                      <view class="tr">
                        <view class="td">{{ item.goodsName}} </view>
                        <view class="td">{{ item.goodsNo }} </view>
                        <view class="td">{{ item.goodsCount }}</view>
                      </view>
                    </van-checkbox>
                  </view>
                </view>
              </van-checkbox-group>
            </view>
    </scroll-view>

    按需要处理即可:

     

    三、全选与反选

    参考:https://www.w3cschool.cn/vantlesson/vantlesson-uv4335v8.html

    通过CheckboxGroup实例上的toggleAll方法可以实现全选与反选

    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <van-checkbox name="a">复选框 a</van-checkbox>
      <van-checkbox name="b">复选框 b</van-checkbox>
      <van-checkbox name="c">复选框 c</van-checkbox>
    </van-checkbox-group>
    
    <van-button type="primary" @click="checkAll">全选</van-button>
    <van-button type="info" @click="toggleAll">反选</van-button>
    export default {
      data() {
        return {
          result: []
        }
      },
    
      methods: {
        checkAll() {
          this.$refs.checkboxGroup.toggleAll(true);
        },
        toggleAll() {
          this.$refs.checkboxGroup.toggleAll();
        }
      }
    }

     

    展开全文
  • Vant List 列表

    千次阅读 2020-12-19 14:13:34
    import { List } from 'vant';Vue.use(List);代码演示基础用法List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作...
  • 在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现。...它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态、无实例的,无状态就意味着它没有created...
  • 引用Vant UI 作为样式 特性: 1、支持动态、静态数据源。 2、支持分页加载。 3、支持模糊搜索。 4、支持单选、多选。 组件源码: <van-search class=gn-search placeholder=请输入搜索关键词 v-model=...
  • vue实用组件——表格

    千次阅读 2020-12-20 10:21:45
    之前用了一下vue-bootstrap,感觉里面的表格组件特别好用,但是如果仅仅为了使用表格就引入bootstrap,似乎有点不划算。所以自己就试着实现了一下bootstrap里面表格的部分功能,目前只是实现了表格内容的排版和列...
  • vant Table 封装】

    2022-04-11 10:44:55
    vant Table 封装 组件 <template> <div class="vant-table"> <table cellspacing="0" :style="bgcolor" style="width:100%" class="table"> <tr> <th class="th" v-for="(item, ...
  • 有赞Vant组件库(电商的宝宝要捂嘴笑了) Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收录了50+个组件,都是来源于有赞的微商城业务,经过有赞业务的检验,轻量可靠 (目前在Github上已经收获...
  • 2、使用vant组件 npm install vant –S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错...
  • Vant Webapp步骤表单

    2022-02-24 15:37:17
    Vant webApp步骤表单 文章目录Vant webApp步骤表单一、前言二、预览三、代码1.shareApplication.js2.shareApplication.json3.shareApplication.wxml4.shareApplication.wxss 一、前言 Vant版本:1.10.2 官方地址:...
  • error-message可以绑定一个字符串变量,记得加上冒号(:error-message="yourText")例如,撸一个输入账号,再撸一个输入密码:v-model="username"clearablelabel="用户名"icon="question"placeholder="手机号/...v-mod...
  • import { SwipeCell } from 'vant';const app = createApp();app.use(SwipeCell);代码演示基础用法SwipeCell 组件提供了 left 和 right 两个插槽,用于定义两侧滑动区域的内容。自定义内容SwipeCe...
  • 在main中引入 import { Form } from "vant";Vue.use(Form);import { Field } from "vant";Vue.use(Field);2.v-model="username"name="username"label="用户名"placeholder="用户名":rules="[{ v...
  • 基于vant 移动端动态表单实现

    千次阅读 2021-01-28 15:22:03
    大锅饭
  • Vant-UI 表单(Field组件) <van-form @submit="onSubmit"> <!-- 在form表单中,van-button默认的native-type='submit'。native-type:原生 button 标签的 type 属性,默认是submit --> <van-...
  • vantvant-cell表格中放图片 图片文字对不齐问题 html <van-cell v-for="(vanItem,vanIndex) in item" v-if="(vanItem.isLabModel && labInfo) || !vanItem.isLabModel" :key="vanI...
  • 我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性。在element-ui中添加tag很简单,最...设想有两个组件,他们两个大部分都相同,只有某一个地方不同,这个时候为了这个地方而别的部分的重复就完全
  • 本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码,供大家参考,具体内容如下v-model="item.flag"class="listli">{{ item.name }}{{ item.id }}全选确定export default {data() {return {...
  • 小程序 引入weapp框架 实现自制表格

    千次阅读 2018-12-04 14:36:59
    纯属娱乐 &lt;!--index.wxml--&gt; &lt;view&gt; &lt;i-tabs current="{{ current }}" bindchange="handleChange"&gt; &lt;i-tab key="...i
  • vant 分页使用

    千次阅读 2021-01-27 13:42:01
    <van-pagination @change="handleCurrentChange" v-model="searchFrom.page" :total-items="total_page" :page-count="pagenum" force-ellipses /> ... this.searchFrom.admin_id = this.admin_i.
  • 表格合并,商品规格表格合并,SKU生成后的表格合并
  • 基于react-vant封装表单基本常用组件 [react-vant 组件库地址](https://3lang3.github.io/react-vant/v1/#/zh-CN/) 目录基于react-vant封装表单基本常用组件一、基础组件1. LocationPicker总结 一、基础组件 1. ...
  • 下面小编就为大家分享一篇vue实现在表格里,取每行的id的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,195
精华内容 478
关键字:

vant 做表格