ct-adc-list
v4.3.0
Published
A Vue.js project
Downloads
25
Readme
介绍
本组件用于渲染一个table,支持自定义单元格显示,如将一个单元格中的内容渲染为一个外部的组件。
使用
安装
npm install 'ct-adc-list';
使用
import {table, column} from 'ct-adc-list';
Vue.component('adc-table', table);
Vue.component('adc-column', column);
或
new Vue({
component:{
'adc-table': table,
'adc-column': column
}
})
参数说明
table配置项
参数|描述|类型|是否必填|默认值 --- | --- | --- | --- | --- | data | 用来渲染表格的数据 | Array | 非必填 | [] checked | 选中状态 | Object | 否 | {checkAll: false, checked: []} loading | 加载状态 | Boolean | 非必填 | false status | 表格数据响应状态(成功/失败) | Boolean | 非必填 | true msg | 显示信息(status为true时为提示信息(如'请点击搜索按钮'),status为false时为出错信息(如'请求失败')) | String | 非必填 | '' selectionKey | 复选框选中/取消选中数据时依据的主键 | String | 需要渲染selection时为必填 | '' selectionSave | 改变数据时(如翻页)是否保存复选框的选中状态 | Boolean | 非必填 | false
table-column配置项
参数|描述|类型|是否必填|默认值 --- | --- | --- | --- | --- | type | 数据被渲染为什么类型 | String | 非必填 | ''(用对应data中的数据渲染) prop | 对应的字段名 | String | 非必填 | ''(不对应data中的任何字段,为抽象字段,如复选框,可以不指定该项) name | 表头显示名称 | String | 非必填 | ''(表头标题为字符串'') width | 列宽 | String(Number) | 非必填 | ''(0) visible | 该列是否可见(为方法时取决于返回值,当为function时详见下方说明) | Boolean,Function | 非必填 | true filter | 过滤器(为字符串时会到Vue的公用filters中获取方法,当为function时详见下方说明 | String,Function | 非必填 | ''(不处理) className | 设置单元格td的class(当为function时详见下方说明) | String,Function,Array | 非必填 | ''(不添加类) mapper | 映射(将数据通过映射转换为显示内容(比如将数字1显示为'已启用')) | Array | 非必填 | [] (不映射) ashtml | 是否将内容渲染为html | Boolean | 非必填 | false
className为Array时格式如下:
[
{
text: '系统研发',
className: 'text-danger'
},
{
text: '移动平台',
className: 'text-success'
}
]
selection列的model
双向绑定属性: selection
默认值:
[]
当指定了selection列且按以上形式双向绑定后,则当selection中的选中项发生变化时,则可同步到父组件。
table-column插槽
table-column中对于td的内容支持普通插槽和作用域插槽,均为默认插槽,无需指定名字。
作用域插槽中可以拿到3个数据:分别是当前td中的值(需绑定prop属性),所在行的数据,所在行的索引
<template slot-scope="{data, item, index}">
<button type="button" class="btn btn-sm btn-danger" @click="clickSlot(data, item, index)">button in scopedSlot</button>
</template>
table-column中对于th的内容支持作用域插槽,该插槽名字为th
<template slot="th" slot-scope="{index}">
哈哈哈from slot{{index}}
</template>
方法属性的说明
可为方法的属性有: visible, filter, className;
方法的this指向外层组件,及table组件的父组件,也是开发者项目中使用了table的组件。
方法的参数统一为 data, item, index, key,分别为当前项的值、当前行的值、当前项的索引、当前项的key。
方法说明
getChecked
参数: 无参数
描述: 获取选中项
返回值 []
为选中项的索引集合
事件说明
事件列表
事件名称 | 说明 | 回调参数 | 描述 --- | --- | --- | --- check-all | 全选被选中/取消选中 | 是否被全选: Boolean | 全选被选中/取消选中触发的事件 check | 单项选中/取消选中 | {index: Number, key: [该行数据中的selectionKey], checked: Boolean} | 单项选中/取消选中触发的事件
Q & A
某些情况下需要整列不显示,怎么处理?
在html片段中去掉对应的adc-table-column
数据的处理可以通过mapper和filter,两者都可以干扰到数据的最终结果,内部规则是怎样的?
先使用mapper映射,再使用filter处理
注意事项
- 给data赋值时,需要保证status为true,才能正确显示数据,否则整个table会被认为处于'错误'的状态。