Skip to content

V
vue-toolbox
Commit f5f11df8 authored by 马雄伟's avatar 马雄伟
Browse files
Options

Delete table.md

parent a83f055c
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 361 deletions
doc/table.md deleted 100644 → 0
View file @ a83f055c
# table组件
> 说明：在Element-ui基础上内置多种列类型,集成分页功能方便快速开发
## 组件参数说明
> 参数
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---------- |-------------- |---------------|-------------------------------- |-------- |
| tableConfig | Object | 导入table数据以及列配置 | - | - |
## 参数详解
> tableConfig
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | Array | — | — |
| maxHeight | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |
| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | string/number | — | — |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id | string | — | — |
| defaultSort | 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 | Object | order: ascending, descending | 如果只指定了prop, 没有指定order, 则默认顺序是ascending |
| columns | 表格列的配置描述，具体项见后文 | Array | — | 见下文 |
| operate | 操作列的配置描述，具体项见后文 | Array | — | 见下文 |
| checkbox |是否展示多选框|Object|-|见下文|
| radio |是否展示单选框|Object|-|见下文|
| tree |树型结构数据| Object | — | 见下文 |
| empty | 无数据时展示的图片和文案 | Object | — | 见下文 |
| pagination | table分页配置 | Object | — | 见下文 |
| isRowSort | 是否开启行排列 | boolean | — | false |
| rowSort | 行排序后的回调函数，参数为排序后的data |Function(Array) | — | — |
| columnSort | 当表格的排序条件发生变化的时候会触发该事件| Function({ column, prop, order }) | — | — |
> columns
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| key | 对应列内容的字段名 | string |— |— |
| title | 显示的标题 | string | — | — |
| width | 对应列的宽度 | string | — | — |
| minWidth | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string |— |— |
| splitLength | 列字符长度超过splitLength，截取展示... ,并将文案展示在el-popover上| number | — | 1000 |
| type | 指定对应列使用内置的column去渲染 | string | mobile/money/int/image/date/slot | — |
| filter | 对应列展示文字使用commonFilter过滤器 | Array | [{ value: string/number;label: string;}]。 value为列对应的值，label为需要展示的文案 | — |
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 columnSort 事件 | boolean, string |true, false, 'custom' | false |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
| align | 对齐方式 | String | left/center/right | left |
> operate
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| title | 显示的标题 | string | — | — |
| width | 对应列的宽度 | string | — | — |
| key | 操作列直接展示的操作 | Array，[{key: "detail",text: "查看"}]| — | — |
| more | 更多操作中包含的操作 | Array，[{key: "edit",text: "编辑"}]| — | — |
| operateKeyClick | 操作被点击回调，row行数据，key对应key/more数组对象中key字段 | Function(row: any, key: string) | — | — |
> empty
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| text |无数据时展示的文案|string | — |暂无数据 |
| emptyType | layout-empty组件支持的empty_type类型 | string | list | list |
> pagination
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| pageSizes |每页显示个数选择器的选项设置|number[] | — |[10, 20, 30, 40, 50, 100] |
| pageSize |每页显示条目个数，支持 .sync 修饰符| number | — | 10 |
| total |总条目数| number | — | — |
| currentPage |当前页数，支持 .sync 修饰符| number | — | 1 |
| handleSizeChange |pageSize 改变时会触发|Function(pageSize) | — | — |
| handleCurrentChange |currentPage 改变时会触发|Function(pageNo) | — | — |
> tree
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| rowKey | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。 |string| — | id |
| expandAll | 树形数据是否默认展开 | boolean | — | false |
| treeProps |渲染嵌套数据的配置选项 | Object | — |{ hasChildren: 'hasChildren', children: 'children' } |
> checkbox
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| isShow | 是否展示多选框 | boolean | — | false |
| rowKey | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。 |string| — | id |
| selectionChange | 当选择项发生变化时会触发该事件 | Function(selection) 选中结果 | — | — |
> radio
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| isShow | 是否展示单选 | boolean | — | false |
| radioModel | v-model默认选中值项的索引 |number| — | — |
| radioText | 单选的label文案 |string| — | "" |
| radioChange | 当选择项发生变化时会触发该事件 | Function(row) 选中结果 | — | — |
#### 演示图
<img src="./table-demo.png" />
#### 使用demo
```html
<template>
<cy-table :tableConfig="tableConfig">
<template slot="tags" slot-scope="scope">
<div v-if="scope.row.tags && scope.row.tags.length !== 0">
<div v-if="scope.row.tags.length > 2">
<span>
{{ scope.row.tags[0].name }}
</span>
<span>
{{ scope.row.tags[1].name }}
</span>
<el-popover
placement="top-start"
trigger="click"
popper-class="popover-Tip"
>
<el-tag
v-for="tag in scope.row.tags"
:key="tag + Math.random()"
:disable-transitions="false"
style="background: #f0f3fe; color: #708df5"
>
{{ tag.name }}
</el-tag>
<el-button
size="small"
type="text"
slot="reference"
icon="el-icon-more"
></el-button>
</el-popover>
</div>
<div v-if="scope.row.tags.length <= 2">
<span v-for="tag in scope.row.tags" :key="tag + Math.random()">
{{ tag.name }}
</span>
</div>
</div>
<div v-else>--</div>
</template>
</cy-table>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { ItableConfig } from "@/components/public/cy-table/type";
@Component
export default class extends Vue {
private tableConfig: ItableConfig = {
data: [],
maxHeight: "",
columnSort: val => {
console.log("排序", val);
},
selections: [],
pagination: {
pageSizes: [10],
pageSize: 10,
total: 0,
currentPage: 1,
handleSizeChange: val => {
console.log("分页大小改变", val);
},
handleCurrentChange: val => {
console.log("分码改变", val);
}
},
radio: {
isShow: true,
radioModel: 0, //传入默认选中项的索引，无匹配传入-1
radioText: "",
radioChange: row => {
console.log("radio", row);
}
},
checkbox: {
isShow: true,
rowKey: "id",
selectionChange: rows => {
console.log("selection-change", rows);
},
checkSelectable: key => {
return true
}
},
empty: {
text: "查无数据啦",
emptyType: "list"
},
columns: [
{
key: "name",
title: "名称",
minWidth: "100",
fixed: "left"
},
{
key: "mobile",
title: "手机号",
minWidth: "150",
type: "mobile"
},
{
key: "tags",
title: "标签",
minWidth: "220",
type: "slot" //支持插槽
},
{
key: "pay_order_num",
title: "支付订单数",
minWidth: "140",
sortable: "custom",
type: "int"
},
{
key: "pay_total",
title: "实付金额",
minWidth: "120",
type: "money",
sortable: "custom"
},
{
key: "latest_marketing_time",
title: "最近营销时间",
minWidth: "200",
sortable: "custom",
type: "date"
}
],
operate: {
title: "操作",
width: 230,
key: [
{
key: "detail",
text: "查看"
},
{
key: "addNote",
text: "备注"
}
],
more: [
{
key: "del",
text: "删除"
}
],
operateKeyClick: (row, key) => {
console.log("operateKey:", key, "-------", row);
switch (key) {
case "detail":
//
break;
case "addNote":
//
break;
case "del":
//del
break;
}
}
}
};
private created() {
setTimeout(() => {
this.tableConfig.data = [
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
}
].map(item,index => {
const enable = true; // true 可以点击 false 禁止点击
return {
...item,
detail:enable,
addNote:enable,
del:enable,
delShow:enable //显示删除按钮
}
if(index === 0){
item.del = false;
}
});
}, 3000);
this.selections = data[1]
}
}
</script>
```
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment