# Table 表格
# 基础使用
<template>
<div>
<WMTable :data="tableData" :columns="columns"></WMTable>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
};
},
computed: {
columns() {
return [
{
type: 'selection',
width: 50,
align: 'center',
},
{
prop: 'date',
label: '日期',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'address',
label: '地址',
},
];
},
},
};
</script>
<style></style>
显示代码
# 分页使用
<template>
<div>
<WMTable :data="tableData" :columns="columns" :paginationOption="pageOption"></WMTable>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
pageOption: {
current: 1,
size: 15,
total: 4,
},
};
},
computed: {
columns() {
return [
{
type: 'selection',
width: 50,
align: 'center',
},
{
prop: 'date',
label: '日期',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'address',
label: '地址',
},
];
},
},
};
</script>
<style></style>
显示代码
# 懒加载使用
<template>
<div>
<WMTable :data="tableData" :columns="columns" row-key="id" lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"></WMTable>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true,
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
};
},
computed: {
columns() {
return [
{
type: 'selection',
width: 50,
align: 'center',
},
{
prop: 'date',
label: '日期',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'address',
label: '地址',
},
];
},
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
]);
}, 1000);
},
},
};
</script>
<style></style>
显示代码
# 自定义表头
<template>
<div>
<WMTable :data="tableData" :columns="columns">
<template #addressHeader>
<el-input size="mini" v-model="value" placeholder="请输入"></el-input>
</template>
</WMTable>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
};
},
computed: {
columns() {
return [
{
type: 'selection',
width: 50,
align: 'center',
},
{
prop: 'date',
label: '日期',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'address',
label: '地址',
headerSlot: true,
},
];
},
},
};
</script>
<style></style>
显示代码
# 自定义列
<template>
<div>
<WMTable :data="tableData" :columns="columns">
<template #address="{ row }">
<el-tag size="mini">{{ row.address }}</el-tag>
</template>
</WMTable>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
};
},
computed: {
columns() {
return [
{
type: 'selection',
width: 50,
align: 'center',
},
{
prop: 'date',
label: '日期',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'address',
label: '地址',
slot: true,
},
];
},
},
};
</script>
<style></style>
显示代码
# 行拖拽
<template>
<div>
<WMDragTable handle=".move" @drop="dropEnd">
<WMTable :data="tableData" :columns="columns">
<template #move>
<i class="move iconfont el-icon-rank" style="cursor: move"></i>
</template>
</WMTable>
</WMDragTable>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
};
},
computed: {
columns() {
return [
{
prop: 'move',
width: 50,
align: 'center',
slot: true,
},
{
prop: 'date',
label: '日期',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'address',
label: '地址',
},
];
},
},
methods: {
dropEnd({ list }) {
console.log(list);
},
},
};
</script>
显示代码
# Table Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 显示的数据 | array | [] |
| columns | 表头信息 | array | [] |
| isLoad | 是否立即请求 | boolean | true |
| pagination | 是否展示分页 | boolean | true |
| paginationOption | 分页选项 | object | {} |
| isEmpty | 是否显示缺省图 | boolean | true |
# Table Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| load | 请求表格数据 | - |
# Table-column Scoped Slot
| name | 说明 |
|---|---|
propHeader | 自定义表头内容, prop 对应的是表头信息的 prop |
# DragTable
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| handle | 定义拖拽元素 | string | '' |
| animate | 拖拽动画过渡时间 | number | 100ms |
| 事件名 | 说明 | 参数 |
|---|---|---|
| drag | 拖拽开始事件 | - |
| drop | 拖拽结束事件 | {target: 当前选中节点, list: 完成后的数据列表} |
# 其他属性
Form 表单 →