Giter VIP home page Giter VIP logo

table_component's Introduction

使用说明

该组件具有 列表展示模式，勾选模式，展开行模式。

  1. 复制/miniprogram/public/components/public下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中）
  2. 在需要使用的页面引入table组件即可。
  3. 请注意，rowKey字段指出数据唯一的标识，默认值为id字段，若数据中不存在id字段，则请指定rowKey为数据中的唯一标识字段。

示例小程序

小程序图片

API

prop

参数 说明 类型 默认值 是否必填
columns 表格的配置 Columns[] [] true
dataList 数据 any[] [] true
getListLoading 请求列表的loading boolean false true
showTipImage 无数据时的提示文本图片 boolean false true
rowKey 用于指明每条数据的唯一标识符，勾选状态下是勾选项返回的值 string id false
tableHeight table高度。 string 600rpx false
tipTitle 无数据时的提示文本主标题 string 提示 false
tipSubtitle 无数据时的提示文本副标题 string 暂无数据 false
scrollX 是否需要X轴滚动。 boolean false false
select 控制是否出现勾选。 boolean false false
selectKeys 勾选的初始值 any[] [] false
generic:action-td 当列表项内具有操作列，需要在columns内添加type:action的一项，操作列的内容往往需要自定义，小程序不提供react,vue的rander函数，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由bindclickaction触发 component undefined false
isExpand 控制是否点击展开。 boolean false false
expandValueKey 展开信息的key值 string false
initExpandValue 当展开信息为空时的默认提示语 string '暂无信息' false
expandStyle 展开信息的最外层的样式 string '' false
generic:expand-component 如果展开区域的内容需要自定义，expandValueKey设置为空字符串，则切换到组件模式，传一个组件进来，展开区域的点击事件由bindclickexpand触发 component undefined false
dynamicValue 给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} object {} false

event

事件 解释 类型
bindclicklistitem 点击列表行事件 Function(e); e.detail.value = {index:number（当前行序号）,item: any（当前行的内容）}
bindclickexpand 点击展开内容事件 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在expand-component里)}
bindclickaction 点击抽象节点事件 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}
bindonactionevent 抽象节点内的业务事件触发 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}
bindcheckkey 勾选事件 返回被勾选项的rowKey数组 Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果)
bindscrolltolower 滚动触底 Function()
bindscrolltoupper 滚动触顶 Function()

column

列描述数据对象，是 columns 中的一项，Column 使用相同的 API。

事件 解释 类型 必填
title 字段名中文含义 string true
key 字段名 string true
width 单元格宽度 string false
type 判断字段是否是自定义组件 'action'/undefined false
render td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容 function false

table_component's People

Contributors

mmmml-zhao avatar

Stargazers

MaydayMemory avatar avatar avatar t2think avatar Shancieli avatar 余弦 avatar Yao Liang Si avatar 叫我小胡同学 avatar Karl丶Invoker avatar raino avatar 我这么菜怎么办 avatar avatar 凛冬-X avatar avatar avatar avatar avatar Mort4l avatar Xiong YeXing avatar avatar avatar avatar Andy Cao avatar avatar avatar avatar princess avatar Harry Z avatar avatar XianghuiQu avatar 黑山机构 avatar avatar avatar avatar avatar avatar avatar avatar avatar Wentworth G ʕ•̫͡•ʔ avatar avatar edc avatar あかり avatar avatar avatar Drieux avatar avatar avatar Mast Sail avatar Jeff Waelchi avatar 仿生狮子 avatar avatar chrisdeng avatar Tax1 avatar 冀贞福 avatar Lee Hu avatar Evan Wang avatar avatar avatar avatar avatar avatar lintanke avatar avatar Hulk Su avatar avatar avatar L_sen avatar LiuLiang avatar Visual Studio Code avatar avatar avatar avatar lateautumn02 avatar 湫 avatar lwenm avatar Euler0525 avatar avatar avatar avatar avatar avatar yaphone avatar avatar freer avatar 猿小熊 avatar Howe avatar avatar avatar avatar avatar david.wang avatar avatar avatar avatar HZP avatar avatar avatar Jamboy avatar PXL avatar

Watchers

James Cloos avatar Visual Studio Code avatar david.wang avatar avatar

Forkers

195374305 kchen2017 l583289184 lwgx taoduidui log6262635 qac1 jkjijujyjh shengrongkeji muscliy xiaoxuany hollyhou pppartric jackpot-abc zhang-yun-jie joshuazh w-bo zhangwh754 johnsonhwuang nanhupatar

table_component's Issues

表格删除数据，最后一条数据删除后，页面不渲染

表格删除数据，最后一条数据删除后，页面不渲染。

比如有5条数据，在删除按钮的点击事件中做判断，删除datalist变量中对应的Index的数据。并this.setData()更新。但是当剩下最后一条数据的时候，尽管datalist变量已经为空数组[]，但是页面上还是显示有最后一条数据

datalist数据变化后，wxml渲染异常

场景出现在分页数据，当向下翻页时，数据量相同（比如每页10条）时，不会出现问题，但是当后面一页（A页）的数据量少于上一页（B页）时，往回翻页后（回到B页），那么B页渲染的数据就只有A页datalist.length条，实际上B页的datalist数据量还是10条，但是不能渲染出来。
image
image
image

这个怎么用?

复制你源码?可是你源码里面路径很多是写死的

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.