# 数据表格
··· 针对 elementUI 进行二次封装。 ···
# 例子
# 简单数据
<template>
<box-datagrid :option="option" :data="onData"></box-datagrid>
</template>
<script>
export default {
data() {
return {
option: {
columns: [
{
prop: "title",
label: "标题",
option: {
rules: [
{
required: true,
message: "请输入名称",
trigger: "blur",
},
],
},
},
],
},
data: [
{
id: 1,
title: "我是标题1",
},
{
id: 2,
title: "我是标题2",
},
{
id: 3,
title: "我是标题3",
},
{
id: 4,
title: "我是标题4",
},
{
id: 5,
title: "我是标题5",
},
{
id: 6,
title: "我是标题6",
},
{
id: 7,
title: "我是标题7",
},
{
id: 8,
title: "我是标题8",
},
{
id: 9,
title: "我是标题9",
},
{
id: 10,
title: "我是标题10",
},
{
id: 11,
title: "我是标题11",
},
],
};
},
methods: {
onData(page) {
let len = this.data.length;
let startIndex = (page.pageIndex - 1) * page.pageSize;
let list = [];
if (startIndex + page.pageSize > len) {
list = this.data.slice(startIndex);
} else {
list = this.data.slice(startIndex, page.pageSize);
}
return {
data: list,
totalCount: len,
};
},
},
};
</script>
显示 复制 复制
# 远程数据
<template>
<box-datagrid :option="option" :data="onData"></box-datagrid>
</template>
<script>
export default {
data() {
return {
selection: true,
index: true,
option: {
columns: [
{
prop: "title",
label: "标题",
option: {
rules: [
{
required: true,
message: "请输入名称",
trigger: "blur",
},
],
},
},
],
},
data: [
{
id: 1,
title: "我是标题1",
},
{
id: 2,
title: "我是标题2",
},
{
id: 3,
title: "我是标题3",
},
{
id: 4,
title: "我是标题4",
},
{
id: 5,
title: "我是标题5",
},
{
id: 6,
title: "我是标题6",
},
{
id: 7,
title: "我是标题7",
},
{
id: 8,
title: "我是标题8",
},
{
id: 9,
title: "我是标题9",
},
{
id: 10,
title: "我是标题10",
},
{
id: 11,
title: "我是标题11",
},
],
};
},
methods: {
onData(page) {
let len = this.data.length;
let startIndex = (page.pageIndex - 1) * page.pageSize;
let list = [];
if (startIndex + page.pageSize > len) {
list = this.data.slice(startIndex);
} else {
list = this.data.slice(startIndex, page.pageSize);
}
return {
data: list,
totalCount: len,
};
},
},
};
</script>
显示 复制 复制
# 搜索功能
<template>
<box-datagrid :option="option" :data="onData"></box-datagrid>
</template>
<script>
export default {
data() {
return {
option: {
columns: [
{
prop: "title",
label: "标题",
option: {
rules: [
{
required: true,
message: "请输入名称",
trigger: "blur",
},
],
},
search:true
},
],
},
data: [
{
id: 1,
title: "我是标题1",
},
{
id: 2,
title: "我是标题2",
},
{
id: 3,
title: "我是标题3",
},
{
id: 4,
title: "我是标题4",
},
{
id: 5,
title: "我是标题5",
},
{
id: 6,
title: "我是标题6",
},
{
id: 7,
title: "我是标题7",
},
{
id: 8,
title: "我是标题8",
},
{
id: 9,
title: "我是标题9",
},
{
id: 10,
title: "我是标题10",
},
{
id: 11,
title: "我是标题11",
},
],
};
},
methods: {
onData(page) {
let len = this.data.length;
let startIndex = (page.pageIndex - 1) * page.pageSize;
let list = [];
if (startIndex + page.pageSize > len) {
list = this.data.slice(startIndex);
} else {
list = this.data.slice(startIndex, page.pageSize);
}
return {
data: list,
totalCount: len,
};
},
},
};
</script>
显示 复制 复制
# 选择索引
<template>
<box-datagrid :option="option" :data="onData"></box-datagrid>
</template>
<script>
export default {
data() {
return {
option: {
selection: true,
index: true,
columns: [
{
prop: "title",
label: "标题",
width: 140,
option: {
rules: [
{
required: true,
message: "请输入名称",
trigger: "blur",
},
],
},
},
],
},
data: [
{
id: 1,
title: "我是标题1",
},
{
id: 2,
title: "我是标题2",
},
{
id: 3,
title: "我是标题3",
},
{
id: 4,
title: "我是标题4",
},
{
id: 5,
title: "我是标题5",
},
{
id: 6,
title: "我是标题6",
},
{
id: 7,
title: "我是标题7",
},
{
id: 8,
title: "我是标题8",
},
{
id: 9,
title: "我是标题9",
},
{
id: 10,
title: "我是标题10",
},
{
id: 11,
title: "我是标题11",
},
],
};
},
methods: {
onData(page) {
let len = this.data.length;
let startIndex = (page.pageIndex - 1) * page.pageSize;
let list = [];
if (startIndex + page.pageSize > len) {
list = this.data.slice(startIndex);
} else {
list = this.data.slice(startIndex, page.pageSize);
}
return {
data: list,
totalCount: len,
};
},
},
};
</script>
显示 复制 复制
# 开启汇总
<template>
<box-datagrid :option="option" :data="onData"></box-datagrid>
</template>
<script>
export default {
data() {
return {
option: {
summary:true,
columns: [
{
prop: "title",
label: "标题",
option: {
rules: [
{
required: true,
message: "请输入名称",
trigger: "blur",
},
],
},
},
{
prop: "grade",
label: "成绩",
width: 140,
option: {
rules: [
{
required: true,
message: "请输入成绩",
trigger: "blur",
},
],
},
},
],
},
data: [
{
id: 1,
title: "我是标题1",
grade:10,
},
{
id: 2,
title: "我是标题2",
grade:10,
},
{
id: 3,
title: "我是标题3",
grade:10,
},
{
id: 4,
title: "我是标题4",
grade:10,
},
{
id: 5,
title: "我是标题5",
grade:10,
},
{
id: 6,
title: "我是标题6",
grade:10,
},
{
id: 7,
title: "我是标题7",
grade:10,
},
{
id: 8,
title: "我是标题8",
grade:10,
},
{
id: 9,
title: "我是标题9",
grade:10,
},
{
id: 10,
title: "我是标题10",
grade:10,
},
{
id: 11,
title: "我是标题11",
grade:10,
},
],
};
},
methods: {
onData(page) {
let len = this.data.length;
let startIndex = (page.pageIndex - 1) * page.pageSize;
let list = [];
if (startIndex + page.pageSize > len) {
list = this.data.slice(startIndex);
} else {
list = this.data.slice(startIndex, page.pageSize);
}
return {
data: list,
totalCount: len,
};
},
},
};
</script>
显示 复制 复制
# 左树右表
<template>
<box-datagrid :option="option" :data="onData"></box-datagrid>
</template>
<script>
export default {
data() {
return {
option: {
selection: true,
index: true,
columns: [
{
prop: "title",
label: "标题",
width: 140,
option: {
rules: [
{
required: true,
message: "请输入名称",
trigger: "blur",
},
],
},
},
],
},
data: [
{
id: 1,
title: "我是标题1",
},
{
id: 2,
title: "我是标题2",
},
{
id: 3,
title: "我是标题3",
},
{
id: 4,
title: "我是标题4",
},
{
id: 5,
title: "我是标题5",
},
{
id: 6,
title: "我是标题6",
},
{
id: 7,
title: "我是标题7",
},
{
id: 8,
title: "我是标题8",
},
{
id: 9,
title: "我是标题9",
},
{
id: 10,
title: "我是标题10",
},
{
id: 11,
title: "我是标题11",
},
],
};
},
methods: {
onData(page) {
let len = this.data.length;
let startIndex = (page.pageIndex - 1) * page.pageSize;
let list = [];
if (startIndex + page.pageSize > len) {
list = this.data.slice(startIndex);
} else {
list = this.data.slice(startIndex, page.pageSize);
}
return {
data: list,
totalCount: len,
};
},
},
};
</script>
显示 复制 复制
# 配置(Option)
针对配置的描述 依赖 XXX
名称 | 描述 | 默认值 |
---|---|---|
summary | 是否开始汇总 | false |
addText | 添加文本 | 新增 |
editText | 编辑文本 | 编辑 |
isAdd | 是否有添加 | true |
isEdit | 是否有编辑 | true |
isDel | 是否有删除 | false |
isRefresh | 是否有刷新 | false |
isExcel | 是否可以导出Excel | false |
opWidth | 操作列宽 | false |
isOP | 是否有操作列 | false |
drawer | 是否为抽屉模式 | false |
selection | 选择 | false |
index | 编号 | false |
form | 自定义表单 | false |
OP | 操作列 | false |
data | 数据源 | 默认[] 支持数组 远程 |
toolBar | 工具条 | null |
columnChooser | 显示列 | [] |
export | 导出 | null |
columns | 列项 | [] |
# 配置(columns)
针对配置的描述 依赖 XXX
名称 | 描述 | 默认值 |
---|---|---|
type | 控件类型 | text 参考 |
prop | 数据属性 | |
label | 名称 | false |
width | 列宽 | false |
sortable | 是否可以排序 | false |
headerAlign | 列头对齐 | false |
align | 内容对齐 | false |
option | 组件选项 | {} |
search | 是否加入搜索 | false |
# 方法(Methods)
针对配置的描述 依赖 XXX
名称 | 描述 |
---|---|
onSubmit | 提交 |
onEdit | 编辑 |
onDel | 删除 |
# 事件 (Events)
针对配置的描述 依赖 XXX
名称 | 描述 |
---|---|
onSubmit | 提交 |
onEdit | 编辑 |
onDel | 删除 |
表单 →