@58fe/p5
Version:
pc端vue组件
468 lines (421 loc) • 11.5 kB
Markdown
<script>
module.exports = {
data() {
return {
columns: [
{
label: '姓名',
key: 'name'
},
{
label: '年龄',
key: 'age'
},
{
label: '住址',
key: 'address'
},
{
label: '电话',
key: 'phone'
}
],
data: [
{
name: '张三',
age: 24,
address: '北京市朝阳区',
phone: '17837283728'
},
{
name: '李四',
age: 24,
address: '上海市红桥区',
phone: '18787283762'
},
{
name: '王二麻子',
age: 24,
address: '黑龙江省哈尔滨',
phone: '13289872736'
},
{
name: '小淘气',
age: 24,
address: '重庆',
phone: '19727389983'
}
],
data2: [
{
name: '张三',
age: 24,
address: '北京市朝阳区',
phone: '17837283728'
},
{
name: '李四',
age: 24,
address: '上海市红桥区',
phone: '18787283762'
},
{
name: '王二麻子',
age: 24,
address: '黑龙江省哈尔滨',
phone: '13289872736'
},
{
name: '小淘气',
age: 24,
address: '重庆',
phone: '19727389983'
},
{
name: '张三',
age: 24,
address: '北京市朝阳区',
phone: '17837283728'
},
{
name: '李四',
age: 24,
address: '上海市红桥区',
phone: '18787283762'
},
{
name: '王二麻子',
age: 24,
address: '黑龙江省哈尔滨',
phone: '13289872736'
},
{
name: '小淘气',
age: 24,
address: '重庆',
phone: '19727389983'
}
],
columns3: [
{
label: '姓名',
key: 'name',
fixed: 'left',
width: '120'
},
{
label: '年龄',
key: 'age',
width: '120'
},
{
label: '住址',
key: 'address',
width: '120'
},
{
label: '电话',
key: 'phone',
width: '120'
},
{
label: '年龄2',
key: 'age',
width: '120'
},
{
label: '住址2',
key: 'address',
width: '120'
},
{
label: '电话2',
key: 'phone',
width: '120'
},
{
label: '年龄3',
key: 'age',
width: '120'
},
{
label: '住址3',
key: 'address',
width: '120'
},
{
label: '电话3',
key: 'phone',
width: '120'
}
],
columns4: [
{
label: '姓名',
key: 'name',
fixed: 'left',
width: '120'
},
{
label: '年龄',
key: 'age',
width: '120'
},
{
label: '住址',
key: 'address',
width: '120'
},
{
label: '电话',
key: 'phone',
width: '120'
},
{
label: '年龄2',
key: 'age',
width: '120'
},
{
label: '住址2',
key: 'address',
width: '120'
},
{
label: '电话2',
key: 'phone',
width: '120'
},
{
label: '年龄3',
key: 'age',
width: '120'
},
{
label: '住址3',
key: 'address',
width: '120'
},
{
label: '电话3',
key: 'phone',
fixed: 'right',
width: '120'
}
],
columns5: [
{
label: '姓名',
key: 'name',
sortable: true
},
{
label: '年龄',
key: 'age'
},
{
label: '住址',
key: 'address'
},
{
label: '电话',
key: 'phone'
}
],
columns6: [
{
label: '姓名',
key: 'name',
render: (h, params) => {
return h('div', [
h('strong', params.row.name)
]);
}
},
{
label: '年龄',
key: 'age'
},
{
label: '住址',
key: 'address'
},
{
label: '电话',
key: 'phone'
},
{
label: '操作',
key: 'action',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
// this.show(params.index)
}
}
}, 'View'),
h('Button', {
props: {
type: 'danger',
size: 'small'
},
on: {
click: () => {
// console.log(params.index);
// console.log(this.data6);
this.data6.splice(params.index, 1);
}
}
}, 'Delete')
]);
}
}
],
data6: [
{
name: '张三',
age: 24,
address: '北京市朝阳区',
phone: '17837283728'
},
{
name: '李四',
age: 24,
address: '上海市红桥区',
phone: '18787283762'
},
{
name: '王二麻子',
age: 24,
address: '黑龙江省哈尔滨',
phone: '13289872736'
},
{
name: '小淘气',
age: 24,
address: '重庆',
phone: '19727389983'
}
],
data7: []
}
},
methods: {
ontablechecked(data) {
console.log(data);
},
sort(callback) {
console.log(callback);
}
}
}
</script>
## table 表格
### 引入
```javascript
import { table } from '@58fe/p5';
```
引用的组件使用过程中，可以加前缀`p5-`进行使用，`p5-table`
### 基本用法
目前只支持，左边固定，右侧固定，中间滑动
:::demo 按钮
```html
<p5-table :data="data" :columns="columns"></p5-table>
```
:::
### 带边框表格
`border`参数设置为true即可
:::demo 按钮
```html
<p5-table :data="data" :columns="columns" :border=true></p5-table>
```
:::
### 固定表头
设置`max-height`最大表格高度，超过高度后可滚动
:::demo 按钮
```html
<p5-table :data="data2" :columns="columns" :max-height="200"></p5-table>
```
:::
### 固定列
`columns`参数中，想要固定的列设置`fixed`值为`left`or`right`，即可固定
:::demo 按钮
```html
<p5-table :data="data2" :columns="columns3"></p5-table>
```
:::
### 同时固定表头和列
`columns`参数中，想要固定的列设置`fixed`值为`left`or`right`，即可固定
:::demo 按钮
```html
<p5-table :data="data2" :columns="columns3" :max-height="200"></p5-table>
```
:::
### 同时固定表头和列 两侧固定
`columns`参数中，想要固定的列设置`fixed`值为`left`or`right`，即可固定
:::demo 按钮
```html
<p5-table :data="data2" :columns="columns4" :max-height="200"></p5-table>
```
:::
### 排序
`columns`参数中，想要设置排序的列设置参数`sortable`值为`true`，点击排序触发`sort`事件。若只设置一列排序，返回参数为对象形式。
`callbackData: {key: 'name',sort: 'asc'}`，其中`sort`值`asc`为升序`decs`为降序`normal`不排序，若设置多列排序，返回参数对象数组`callbackData: [{key: 'name',sort: 'asc'}, {key: 'age',sort: 'desc'}]`。
:::demo 按钮
```html
<p5-table :data="data" :columns="columns5" @sort="sort"></p5-table>
```
:::
### 自定义操作
在`column`内增加`render`函数，该函数提供两个参数`h`渲染函数，同vue的h，第二个参数为当前行的对象数据。
:::demo 按钮
```html
<p5-table :data="data6" :columns="columns6"></p5-table>
```
:::
### 暂无数据
:::demo 按钮
```html
<p5-table :data="data7" :columns="columns6"></p5-table>
```
:::
### 带多选框
:::demo 按钮
```html
<p5-table :data="data" :columns="columns" :has-checkbox=true @ontablechecked="ontablechecked"></p5-table>
```
:::
### 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------ | ----------- | ------------ | ------- |
| data | 表格数据 | Array | —— | [] |
| columns | 表格头(下面有具体的colums参数说明）| Array | —— | [] |
| maxHeight | 最大高度(超出后，表格滚动) | Number | —— | —— |
| border | 全包围border | Boolean | —— | false |
| hasCheckbox | 是否需要多选框 | Boolean | —— | false |
| isAllCheckedCustom | 是否默认选中全部 | Boolean | —— | false |
<br/>
<br/>
#### colums
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------ | ----------- | ------------ | ------- |
| label | 表格当前列文案 | String | —— | —— |
| key | 表格当前列key值，对应data中的key | String/Number | —— | —— |
| width | 表格当前列的宽度(默认不填为平均分) | Number/String | —— | —— |
| fixed | 表格头(下面有具体的colums参数说明）| Array | —— | —— |
| sortable | 支持排序功能 | Boolean | —— | ——|
| render | 渲染函数(同vue内的渲染函数，包含两个参数，h/params，`params:{index, row, column}`，index为索引值，row当前行的数据，column当前列的数据) | Function | —— | —— |
#### Events
| 参数 | 说明 | 类型 | 参数 |
| -------- | ------------ | ----------- | ------------ |
| sort | 点击排序图标后触发 | Function | `{key: "${当前要排序的key}", sort: "none"}` sort值为`asc、desc、none` |
| ontablechecked | 点击多选框后触发 | Function | 当前选中状态下的data数组 |