嘟嘟云A sass ui框架

# 基本用法

  • 注意：翻页或者更改页面大小都会向上冒list-change这个事件，list-change这个事件将用作统一更改列表数据事件 翻页参数将从options中传入，如果请求后台需要直接使用即可。组件内部在翻页时候回进行对值的修改无需关注

  • 新增了一个前端自增长id，注意在该模式下@list-change将改成props形式并且list-change函数为Promise否则无法同步更新id！

  • 后续所有的@list-change将改成:list-change以应对需要通过异步来完成的功能

当前页面1， 当前页面条数10

<template>
  <div>
    <p>当前页面{{ options.currentPage }}， 当前页面条数{{ options.pageSize }}</p>
    <higher-table
      :list="tableList"
      :columns="tableColumns"
      :table-load="tableLoad"
      :options="options"
      :list-change="getList"
    />
  </div>
</template>

<script>
export default {
  data() {
    // 数据
    return {
      tableList: [

      ],
      tableColumns: [
        {
          key: 'id',
          label: 'id'
        },
        {
          key: 'name',
          label: '昵称'
        },
        {
          key: 'date',
          label: '时间'
        },
        {
          key: 'email',
          label: '邮箱'
        },
        {
          key: 'content',
          label: '内容'
        }
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300
      }
    }
  },
  methods: {
    getList() {
      console.log('更新')
    }
  }
}
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 居中的表格

  • 通过 align 设置整体的对齐方式
<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    :align="align"
  ></higher-table>
</template>

<script>
export default {
  data() {
    // 数据
    return {
      align: "center",
      tableList: [
        {
          id: "FDOSD4233234",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
      ],
      tableColumns: [
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 多选

选择多行数据时使用 Checkbox。

实现多选非常简单: 手动添加一个设type属性为selection即可；

4.2.5 新增参数autoSelection是否自动设置多选分页选中。开启后会让分页记录多选。您可以通过实例中的selectionAll来快捷获取全部选中。也可以通过getSelectionAll方法获取结构数组

  • 注意！如果你的:list-change函数返回不是一个Promise自动分页多选将会失效因为他是通过await Promise的成功来触发的！ 所以分页多选必须要返回一个Promise。并且需要添加row-key作为匹配参数！
关闭多选
<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    ref="multipleTable"
    :list-change="getList"
    auto-selection
    row-key="id"
  ></higher-table>
  <db-button @click="close" class="table-margin-top">{{
    buttonText
  }}</db-button>
</template>

<script>
const getData = require('@public/query/table').default
export default {
  computed: {
    tableColumns() {
      return [
        this.show
          ? {
              type: "selection",
              width: 55,
            }
          : null,
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ].filter((item) => !!item);
    },
    buttonText() {
      return `${this.show ? "关闭" : "打开"}多选`;
    },
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [],
      tableLoad: false,
      options: {
        pageSize: 4,
        currentPage: 1,
        total: 300,
      }
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.tableLoad = true
      const data = await getData(this.options)
      this.tableList = data.list
      this.$set(this.options, 'total', data.total)
      this.tableLoad = false
    },
    close() {
      this.show = !this.show;
      this.$refs.multipleTable.clearSelection();
    },
  }
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 带操作栏

<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    ref="multipleTable"
    action-width="200px"
  >
    <template v-slot:action="{ scope }">
      <db-button type="text">查看详情</db-button>
      <db-button type="text">重试</db-button>
    </template>
  </higher-table>
</template>

<script>
export default {
  computed: {
    tableColumns() {
      return [
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ];
    },
  },
  methods: {
    close() {
      this.show = !this.show;
      this.$refs.multipleTable.clearSelection();
    },
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [
        {
          id: "FDOSD4233234",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "A34234234234",
          name: "xxx",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "p咔咔咔咔咔咔",
        },
        {
          id: "Gsgdfs",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "fgdfsgdf",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "Qfsdfd",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 自定义表头

  • 通过制定slot为header来开启自定义表头
  • 自定义可通过插槽header来设置总体表头样式，也可以单独设置通过header-${key}来设定
  • slot不为header插槽不会生效
<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    ref="multipleTable"
    action-width="200px"
  >
    <template v-slot:header="{ scope }">
      自定义：{{ scope.column.label }}
    </template>
    <template v-slot:header-date="{ scope }">
      单独设定：{{ scope.column.label }}
    </template>
    <template v-slot:action="{ scope }">
      <db-button type="text">查看详情</db-button>
      <db-button type="text">重试</db-button>
    </template>
  </higher-table>
</template>

<script>
export default {
  computed: {
    tableColumns() {
      return [
        {
          key: "id",
          label: "id",
          slot: 'header'
        },
        {
          key: "name",
          label: "昵称",
          slot: 'header'
        },
        {
          key: "date",
          label: "时间",
          slot: 'header'
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ];
    },
  },
  methods: {
    close() {
      this.show = !this.show;
      this.$refs.multipleTable.clearSelection();
    },
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [
        {
          id: "FDOSD4233234",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "A34234234234",
          name: "xxx",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "p咔咔咔咔咔咔",
        },
        {
          id: "Gsgdfs",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "fgdfsgdf",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "Qfsdfd",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 带快捷筛选

  • 在列中设置filters filter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    ref="multipleTable"
    action-width="200px"
  >
    <template v-slot:action="{ scope }">
      <db-button type="text">查看详情</db-button>
      <db-button type="text">重试</db-button>
    </template>
  </higher-table>
</template>

<script>
export default {
  computed: {
    tableColumns() {
      return [
        {
          key: "id",
          label: "id",
          filters: this.tableList.map(item => ({
            text: item.id,
            value: item.id
          })),
          filterMethod: this.filterHandler
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ];
    },
  },
  methods: {
    close() {
      this.show = !this.show;
      this.$refs.multipleTable.clearSelection();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [
        {
          id: "FDOSD4233234",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "A34234234234",
          name: "xxx",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "p咔咔咔咔咔咔",
        },
        {
          id: "Gsgdfs",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "fgdfsgdf",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "Qfsdfd",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 数据过滤

  1. 有时候我们需要在不改变原始数据的情况下进行数据修改那么可以添加filterColumn这个选项
  2. props添加filterColumn所有为text类型的数据都会调用改方法
  3. 如果你需要单步设置filterColumn那么在item中传filterColumn就可以针对一列选项过滤

注意：item中的filterColumn会覆盖组件props中传的filterColumn

这个例子我们处理了id全改小写并且设置了一个整表的邮箱脱敏 
<template>
  这个例子我们处理了id全改小写并且设置了一个整表的邮箱脱敏
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    ref="multipleTable"
    action-width="200px"
    :filterColumn="filterColumn"
  >
    <template v-slot:action="{ scope }">
      <db-button type="text">查看详情</db-button>
      <db-button type="text">重试</db-button>
    </template>
  </higher-table>
</template>

<script>
export default {
  computed: {
    tableColumns() {
      return [
        {
          // 这里我们进行单步修改id全为小写
          key: "id",
          label: "id",
          filterColumn(text) {
            return text.toLocaleLowerCase();
          },
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ];
    },
  },
  methods: {
    close() {
      this.show = !this.show;
      this.$refs.multipleTable.clearSelection();
    },
    filterColumn(text) {
      return this.isEmail(text) ? this.desensitization(text, 3, -6) : text;
    },
    isEmail(email) {
      return /^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+.)+[A-Za-z]{2,4}$/.test(email);
    },
    desensitization(str, beginLen, endLen) {
      var len = str.length;
      var firstStr = str.substr(0, beginLen);
      var lastStr = str.substr(endLen);
      var middleStr = str
        .substring(beginLen, len - Math.abs(endLen))
        .replace(/[\s\S]/gi, "*");
      return firstStr + middleStr + lastStr;
    },
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [
        {
          id: "FDOSD4233234",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "A34234234234",
          name: "xxx",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "p咔咔咔咔咔咔",
        },
        {
          id: "Gsgdfs",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "fgdfsgdf",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "Qfsdfd",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 自定义插槽

  • 当type为slot时候自定义插槽会自动生效，插槽名称会以key为name进行插入
<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    ref="multipleTable"
    action-width="200px"
  >
    <template v-slot:content="{ scope }">
      <db-tag mode="sign">{{scope.row.content}}</db-tag>
    </template>
    <template v-slot:action="{ scope }">
      <db-button type="text">查看详情</db-button>
      <db-button type="text">重试</db-button>
    </template>
  </higher-table>
</template>

<script>
export default {
  computed: {
    tableColumns() {
      return [
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
          type: 'slot'
        },
      ];
    },
  },
  methods: {
    close() {
      this.show = !this.show;
      this.$refs.multipleTable.clearSelection();
    },
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [
        {
          id: "FDOSD4233234",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "A34234234234",
          name: "xxx",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "p咔咔咔咔咔咔",
        },
        {
          id: "Gsgdfs",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "fgdfsgdf",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "Qfsdfd",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 合并单元格

当前页面1， 当前页面条数10

<template>
  <div>
    <p>当前页面{{ options.currentPage }}， 当前页面条数{{ options.pageSize }}</p>
    <higher-table
      border
      :list="tableList"
      :columns="tableColumns"
      :table-load="tableLoad"
      :options="options"
      :list-change="getList"
      :span-method="objectSpanMethod"
      ref="table"
    />
  </div>
</template>

<script>
const MergeTable = require('db-tidy-ui/lib/utils/mergeTable.js').default
export default {
  data() {
    // 数据
    return {
      tableList: [
        {
          id: 'FDOSD42123123',
          name: '牛皮1',
          date: '牛皮1',
          email: '41234234@qq.com',
          content: '打工人，打工魂。打工都是人上人！'
        },
        {
          id: 'FDOSD42123123',
          name: '牛皮1',
          date: '2012-06-13',
          email: '234235230@qq.com',
          content: '打工人，打工魂。打工都是人上人！'
        },
        {
          id: 'FDOSD42123123',
          name: '牛皮',
          date: '2012-06-14',
          email: '23523423@qq.com',
          content: '打工人，打工魂。打工都是人上人！'
        },
        {
          id: 'FDOS123124213',
          name: '牛皮4',
          date: '2012-09-11',
          email: '64524533@qq.com',
          content: '打工人，打工魂。打工都是人上人！'
        }
      ],
      tableColumns: [
        {
          key: 'id',
          label: 'id'
        },
        {
          key: 'name',
          label: '昵称'
        },
        {
          key: 'date',
          label: '时间'
        },
        {
          key: 'email',
          label: '邮箱'
        },
        {
          key: 'content',
          label: '内容'
        }
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300
      }
    }
  },
  methods: {
    getList() {
      console.log('更新')
    },
    objectSpanMethod(data) {
      return MergeTable({
        ...data,
        tableColumns: this.tableColumns,
        tableList: this.tableList,
        // division: 'id', // 新增参数，设置后更具id的值进行分割合并
        instance: this.$refs.table,
        // useProperty: useProperty, 新增参数设置后决定当前使用什么参数进行合并
        margeRow: true // margeColumn: true 决定是合并行还是列。目前只能区分不能同时合并行和列
      })
    }
  }
}
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 合并表头

  • 表头中声明children是array就可以达到合并表头效果。这个效果可以无限嵌套
<template>
  <div>
    <higher-table
      :list="tableList"
      :columns="tableColumns"
      :table-load="tableLoad"
      :options="options"
      :list-change="getList"
    >
      <template v-slot:province="{ scope }">
        <db-tag mode="sign">{{scope.row.province}}</db-tag>
      </template>
    </higher-table>
  </div>
</template>

<script>
export default {
  data() {
    // 数据
    return {
      tableList: [
        {
          id: 'FDOSD42123123',
          name: '牛皮1',
          date: '2012-06-1',
          email: '41234234@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOSD42123123',
          name: '牛皮1',
          date: '2012-06-13',
          email: '234235230@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOSD42123123',
          name: '牛皮',
          date: '2012-06-14',
          email: '23523423@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOS123124213',
          name: '牛皮4',
          date: '2012-09-11',
          email: '64524533@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        }
      ],
      tableColumns: [
        {
          label: 'id2',
          children: [
            {
              label: '省份详情',
              children: [
                {
                  key: 'province',
                  label: '自定义省份',
                  type: 'slot'
                },
                {
                  key: 'province',
                  label: '省份'
                }
              ]
            },
            {
              key: 'city',
              label: '区域'
            }
          ]
        },
        {
          key: 'name',
          label: '昵称'
        },
        {
          key: 'date',
          label: '时间'
        },
        {
          key: 'email',
          label: '邮箱'
        },
        {
          key: 'content',
          label: '内容'
        }
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300
      }
    }
  },
  methods: {
    getList() {
      console.log('更新')
    }
  }
}
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 展开行

  • 通过设置 type="expand"，使用方式和普通插槽一致。通过key来区分插槽名称
<template>
  <div>
    <higher-table
      :list="tableList"
      :columns="tableColumns"
      :table-load="tableLoad"
      :options="options"
      :list-change="getList"
    >
      <template v-slot:expand="{ scope }">
        <db-tag mode="sign">{{scope.row.content}}</db-tag>
      </template>
    </higher-table>
  </div>
</template>

<script>
export default {
  data() {
    // 数据
    return {
      tableList: [
        {
          id: 'FDOSD42123123',
          name: '牛皮1',
          date: '2012-06-1',
          email: '41234234@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOSD42123123',
          name: '牛皮1',
          date: '2012-06-13',
          email: '234235230@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOSD42123123',
          name: '牛皮',
          date: '2012-06-14',
          email: '23523423@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOS123124213',
          name: '牛皮4',
          date: '2012-09-11',
          email: '64524533@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        }
      ],
      tableColumns: [
        {
          key: 'expand',
          type: 'expand'
        },
        {
          key: 'date',
          label: '时间'
        },
        {
          key: 'email',
          label: '邮箱'
        },
        {
          key: 'content',
          label: '内容'
        }
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300
      }
    }
  },
  methods: {
    getList() {
      console.log('更新')
    }
  }
}
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 树形数据与懒加载

  • 支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
<template>
  <div>
    <higher-table
      :list="tableList"
      :columns="tableColumns"
      :table-load="tableLoad"
      :options="options"
      :list-change="getList"
      row-key="id"
    >

    </higher-table>
  </div>
</template>

<script>
export default {
  data() {
    // 数据
    return {
      tableList: [
        {
          id: 'FDOSD42123123',
          name: '牛皮1',
          date: '2012-06-1',
          email: '41234234@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区',
          children: [
            {
              id: 'FDOSD42123124',
              name: '牛皮1',
              date: '2012-06-1',
              email: '41234234@qq.com',
              content: '打工人，打工魂。打工都是人上人！',
              province: '上海',
              city: '黄浦区'
            }
          ]
        },
        {
          id: 'FDOSD42123125',
          name: '牛皮1',
          date: '2012-06-13',
          email: '234235230@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOSD42123126',
          name: '牛皮',
          date: '2012-06-14',
          email: '23523423@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        },
        {
          id: 'FDOS123124213',
          name: '牛皮4',
          date: '2012-09-11',
          email: '64524533@qq.com',
          content: '打工人，打工魂。打工都是人上人！',
          province: '上海',
          city: '黄浦区'
        }
      ],
      tableColumns: [
        {
          key: 'date',
          label: '时间'
        },
        {
          key: 'email',
          label: '邮箱'
        },
        {
          key: 'content',
          label: '内容'
        }
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300
      }
    }
  },
  methods: {
    getList() {
      console.log('更新')
    }
  }
}
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 表格中使用字典

  • 通过指定type=code,并且数据上拥有code
<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    :align="align"
  >
    <template v-slot:email="{ scope }">
      <db-tag mode="sign">{{
          dict.getValue({
            code: '1000',
            value: scope.row.content
          })
        }}</db-tag>
    </template>
  </higher-table>
</template>

<script>
const { Dict } = require('db-tidy-ui/index');
// import { Dict } from 'db-tidy-ui/index'
Dict.setPath('/insurance-core-huanong/dict/listAllDictByDictNos') // 真实业务无需设置字典路径

export default {
  data() {
    // 数据
    return {
      dict: Dict,
      align: "center",
      tableList: [],
      tableColumns: [
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "content",
          label: "普通使用方法",
          code: '1000',
          type: 'code'
        },{
          key: "email",
          label: "自定义使用方法",
          type: 'slot'
        }
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
  mounted() {
    Dict.save({
      dicts: this.tableColumns,
      deep: true
    }).then(res => {
      this.load = true
      this.tableList = [ // 这边是表数据请求模拟请求出来
        {
          id: "FDOSD4233234",
          name: "牛皮",
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "2",
        },
      ]
    })
  }
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# 关于翻页数据懒更新

  • 请注意以下需在4.8.3版本以上使用

  • 由于form组件数据是实时双向绑定的所以会导致一个问题在筛选查询完毕后，在更改筛选项此时进行翻页查询。由于list-change是业务上内部实现的。一般list-change是实时获取form绑定数据，此时的翻页将会带最新的查询条件，和之前点击查询的条件不统一。以下是对该问题的解决方案

  1. 新增form-instance参数，支持直接Vue实例或者return实例的方法。添加该参数就会进入自动获取form数据模式。

  2. 通过监听update:list-change事件同步更新:list-change传入函数，内部将会自动对该方法调用进行代理监听，如：@update:list-change="getList = $event"

  • 通过以上两个步骤就会开启自动传入form数据

  • 你也可以自己进行同步数据, 通过传入is-custom-upload-data为true进入自定义同步模式，通过手动调用this.$refs.table.updateFormData传入formData, 来手动同步。不传入formData也会自动从form-instance实例中查找

查询 重置 
<template>
  <db-container>
    <db-container-page-table>
      <db-container-page-table-header>
        <higher-form
          ref="form"
          v-model="sendData"
          :list="formList"
        >
          <db-button 
          icon="DBBASEsearch" 
          :loading="queryLoading" 
          @click="query">
            查询
          </db-button>
          <db-button
            icon="DBBASEreset"
            type="low"
            :loading="resetLoading"
            @click="reset"
          >
            重置
          </db-button>
        </higher-form>
      </db-container-page-table-header>
      <db-container-page-table-content>
        <higher-table
          :form-instance="() => $refs.form"
          @update:list-change="getList = $event"
          action-width="224px"
          :list="tableList"
          :columns="tableColumns"
          :table-load="tableLoad"
          :options="tableOptions"
          :list-change="getList"
        >
        </higher-table>
      </db-container-page-table-content>
    </db-container-page-table>
  </db-container>
</template>

<script>
const getData = require('@public/query/table').default
export default {
  computed: {
    tableColumns() {
      return [
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ]
    }
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [],
      tableLoad: false,
      queryLoading: false,
      resetLoading: false,
      tableOptions: {
        pageSize: 2,
        currentPage: 1,
        total: 300,
      },
      useOptions: {},
      sendData: {},
      formList: [{
        type: 'select',
        name: '机构',
        key: 'branchId',
        list: [{
          label: '机构1',
          value: '1'
        }, {
          label: '机构2',
          value: '2'
        }]
      },
      {
        type: 'datePicker',
        name: '工资单年月',
        key: 'payrollTimes',
        valueFormat: 'yyyy-MM-01',
        pickerType: 'month'
      },
      {
        type: 'select',
        name: '提交状态',
        key: 'submitStatus',
        list: [{
          label: '已提交',
          value: '1'
        }, {
          label: '未提交',
          value: '2'
        }]
      }]
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList(options) { // 在有options时候说明当前是通过组件内部触发这个时候使用组件内部参数，在没有options或者options.__pageChangeTrigger不是true的时候说明是业务调用使用实时更新数据
      console.log('当前接收到的值', options)
      this.tableLoad = true
      const sendData = options || this.sendData
      const data = await getData({
        ...sendData,
        ...this.tableOptions
      })
      this.tableList = data.list
      this.$set(this.tableOptions, 'total', data.total)
      this.tableLoad = false
    },
    async query() {
      this.queryLoading = true
      this.getList().finally(() => (this.queryLoading = false))
    },
    async reset() {
      this.$set(this.tableOptions, 'currentPage', 1)
      this.resetLoading = true
      this.sendData = {}
      await this.getList().finally(() => (this.resetLoading = false))
    }
  }
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# Table Attributes

参数 说明 类型 可选值 默认值
list 表数据 Array - []
columns 表头数据 Array - []
align 对齐方式 String left/center/right left
tableLoad 表加载中状态 Boolean - false
fixed 列是否固定在左侧或者右侧，true 表示固定在左侧 string, boolean true, left, right -
width 统一表格宽度 string - -
minWidth 统一表格最小宽度 string - -
filterColumn 过滤属性 function - -
timeout 节流时间属性 number - 300
emptySize 占位图大小 string large normal small small
emptyType 占位图类型 string 404 noContent noNetwork noResult noContent
height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 string/number — —
max-height Table 的最大高度。合法的值为数字或者单位为 px 的高度。 string/number — —
stripe 是否为斑马纹 table boolean — false
border 是否带有纵向边框 boolean — false
size Table 的尺寸 string medium / small / mini —
fit 列的宽度是否自撑开 boolean — true
show-header 是否显示表头 boolean — true
highlight-current-row 是否要高亮当前行 boolean — false
current-row-key 当前行的 key，只写属性 String,Number — —
row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String — —
row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 Function({row, rowIndex})/Object — —
cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String — —
cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex})/Object — —
header-row-class-name 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 Function({row, rowIndex})/String — —
header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 Function({row, rowIndex})/Object — —
header-cell-class-name 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String — —
header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex})/Object — —
row-key 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 Function(row)/String — —
empty-text 空数据时显示的文本内容，也可以通过 slot="empty" 设置 String — 暂无数据
default-expand-all 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 Boolean — false
expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 Array —
default-sort 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 Object order: ascending, descending 如果只指定了prop, 没有指定order, 则默认顺序是ascending
tooltip-effect tooltip effect 属性 String dark/light
show-summary 是否在表尾显示合计行 Boolean — false
sum-text 合计行第一列的文本 String — 合计
summary-method 自定义的合计计算方法 Function({ columns, data }) — —
span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex }) — —
select-on-indeterminate 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 Boolean — true
indent 展示树形数据时，树节点的缩进 Number — 16
lazy 是否懒加载子节点数据 Boolean — —
load 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 Function(row, treeNode, resolve) — —
tree-props 渲染嵌套数据的配置选项 Object — { hasChildren: 'hasChildren', children: 'children' }
auto-selection 是否分页自动记录选中 Boolean — false
form-instance 需要匹配的form实例 Vue — -
is-custom-upload-data 手动同步formData Boolean — false

# 事件

事件说明如下：

事件名 说明 参数 版本
size-change 分页大小更改触发 每页条数 1.0.0
list-change 是否要更新列表 每页条数 1.0.0
current-change 当前页更改触发 每页条数 1.0.0
header-click 表头点击 column, event 1.0.0
sort-change 排序触发 event 1.0.0
selection-change 当选择项发生变化时会触发该事件 selection

← 多选 checkbox →