# 可编辑表格
# 描述
# 无后台交互的编辑表格.
点击查看代码
<!-- @format -->
<template>
<zEditTable :tableColumn="tableColumn" v-model="tableData" :items="items" @page-change="handlePageChange" :rules="rules" v-loading="loading"> </zEditTable>
</template>
<script>
const randomTableData = (size, start = 0) => {
return new Array(size).fill(0).map((item, index) => {
const obj = { date: `2016-05-02`, name: `王小虎${start * size + index}`, address: ['上海1'], _view_: false };
return obj;
});
};
export default {
name: 'zEditTableDemo',
data() {
return {
tableColumn: [
{ prop: 'date', label: '测试1' },
{
prop: 'name',
label: '测试2',
'label-class-name': 'text-center'
},
{
prop: 'address',
label: '测试3',
'label-class-name': 'text-red',
'class-name': 'text-green',
format: (data) => {
return data.scope.row['address'].join(',');
}
}
],
tableData: randomTableData(5),
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'change' }]
},
items: [
{
prop: 'date',
render: 'el-input'
},
{
prop: 'name',
render: 'el-input'
},
{
prop: 'address',
render: 'z-select',
option: {
placeholder: '请输入',
clearable: true,
filter: true,
multiple: true,
multipleLimit: 1,
data: [
{
label: 'group1',
data: [
{
label: '上海1',
value: '上海1'
},
{
label: '北京1',
value: '北京1'
}
]
},
{
label: 'group2',
data: [
{
label: '上海2',
value: '上海2'
},
{
label: '北京2',
value: '北京2'
}
]
}
]
}
}
],
loading: false
};
},
methods: {
handlePageChange(page) {
this.loading = true;
new Promise((resolve) => {
setTimeout(() => {
resolve(randomTableData(5, page - 1));
}, 1000);
}).then((res) => {
this.tableData = res;
this.loading = false;
});
}
}
};
</script>
# 与后台相交互的表格
如果需要与后台进行交互,需要在 z-edit-table上传入 @delete-table 与 @save-table 方法.
注意
@delete-table 与 @save-table 接收一个参数, 参数中包含一个 loading 方法,调用此方法可以切换实现加载状态的切换.
点击查看代码
<!-- @format -->
<template>
<zEditTable
:tableColumn="tableColumn"
v-model="tableData"
:items="items"
@save-table="saveTable"
@delete-table="deleteTable"
@page-change="handlePageChange"
v-bind="paginationOption"
:frontPagination="false"
:rules="rules"
v-loading="loading"
>
</zEditTable>
</template>
<script>
const randomTableData = (size, start = 0) => {
return new Array(size).fill(0).map((item, index) => {
const obj = { date: `2016-05-02`, name: `王小虎${start * size + index}`, address: ['上海1'], _view_: false };
return obj;
});
};
export default {
name: 'zEditTableDemo',
data() {
return {
paginationOption: {
total: 200,
disabled: false
},
tableColumn: [
{ prop: 'date', label: '测试1' },
{
prop: 'name',
label: '测试2',
'label-class-name': 'text-center'
},
{
prop: 'address',
label: '测试3',
'class-name': 'text-red',
format: (data) => {
return data.scope.row['address'].join(',');
}
}
],
tableData: randomTableData(5),
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'change' }]
},
items: [
{
prop: 'date',
// jsx写法
render: (data) => {
return <el-date-picker style={'width:100%'} v-model={data.scope.row['date']} value-format={'yyyy-MM-dd'}></el-date-picker>;
},
isTag: true,
option: {
placeholder: '请输入'
}
},
{
prop: 'name',
render: 'z-select',
isTag: true,
require: true,
option: {
placeholder: '请输入',
clearable: true,
data: new Promise((resolve) => {
setTimeout(() => {
resolve([
{
label: '上海',
value: '上海'
},
{
label: '北京',
value: '北京'
}
]);
}, 4000);
})
}
},
{
prop: 'address',
render: 'z-select',
option: {
placeholder: '请输入',
clearable: true,
filter: true,
multiple: true,
multipleLimit: 1,
data: [
{
label: 'group1',
data: [
{
label: '上海1',
value: '上海1'
},
{
label: '北京1',
value: '北京1'
}
]
},
{
label: 'group2',
data: [
{
label: '上海2',
value: '上海2'
},
{
label: '北京2',
value: '北京2'
}
]
}
]
}
}
],
loading: false
};
},
methods: {
/*******
* @description: 编辑
* @param {Function} loading 通信方法，接受一个参数,改变z-edit-table的显示状态.
* @param {Object} row 操作的这条数据
* @return {void}
*/
saveTable({ row, loading }) {
loading(true);
new Promise((resolve) => {
setTimeout(() => {
resolve(row);
}, 1000);
}).then((res) => {
//调用loading通知操作已经完成，在这之前可以调用一些接口进行数据操作
loading(false);
//接收到 row 之后可以对其进行操作,例如格式化...
row.address = row.address.join();
});
},
/*******
* @description: 删除操作
* @param {Function} callback
* @param {Object} data
* @return {void}
*/
deleteTable({ row, loading }) {
this.paginationOption.disabled = true;
loading(true);
new Promise((resolve) => {
setTimeout(() => {
resolve(row);
}, 2000);
}).then((res) => {
this.tableData = this.tableData.filter((item) => {
return item !== res;
});
this.paginationOption.total--;
this.paginationOption.disabled = false;
loading(false);
});
},
handlePageChange(page) {
this.loading = true;
new Promise((resolve) => {
setTimeout(() => {
resolve(randomTableData(5, page - 1));
}, 1000);
}).then((res) => {
this.tableData = res;
this.loading = false;
});
}
}
};
</script>
下方是z-edit-table的数据配置介绍,以及数据格式规范:
# paginationOption
与 z-table 使用方式一致 详情
# form字段的内容
| 字段名称 | 描述 | 格式 |
|---|---|---|
| v-model | 表格数据,对表格的操作会直接改变此字段中的内容 | 根据tableColumn相对应的数据 (required) |
| tableColumn | 表格的列配置 | ***Array<{prop:String,label:String,...el-table中表头相关的属性}>***表格中可以添加列对应的属性,如果你不知道哪些属性有效果,可以添加上去试试.table-column | Element (opens new window) |
| rules | 校验规则,可以为空 | 与el-form的校验规则格式相同 |
| items | 编辑状态下各个组件相对应的组件 | prop:String 这条数据对应的字段,与tableColumn中prop相对应 render:String|Function 标记状态下需要展示的组件,如 z-select``el-inputisTag:Boolean 告诉 z-edit-tablerender为要渲染的字符串还是组件的名称.当值为false时 render字段的值将会被当作字符串直接渲染 |
| showPagination | Boolean | true |
| paginationOption | Object | {"layout": "total,sizes,prev,pager,next", "pageSize":10, "total":0, "currentPage":1},其他属性请查看 (opens new window) |
| layout | String | total,sizes,prev,pager,next |
| total | Number | 0 |
| pageSize | Number | 10 |
| currentPage | Number | 1 |
| showIndex | Boolean | false |
| showOperation | Boolean | false |
| showExpand | Boolean | false |
| showFixed | Boolean | false |
| showCheckbox | Boolean | false |
| page-change | Function | 页码更新的回调方法 |
| page-size-change | Function | page-size改变的回调方法 |
| ...... | ...... | 其他属性,请参考el-table组件 | Element (opens new window) |