# 数据表格

··· 针对 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 删除