Table 表格

# Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

# 可编辑表格

商品名称
生产日期
类别
picture使用
操作
商品名称
生产日期
类别
picture使用
操作
<aui-table is-edit :head-data="HeadData5" :data="tableData5" :btn-group="btnGroup" :picture="picture" paging-type="complex"></aui-table>
<script>
  export default {
    data() {
      return {
        HeadData5: [
          {
            label: "商品名称",
            prop: "name",
            type: 'input',
          },
          {
            label: "生产日期",
            prop: "date",
            type: 'date'
          },
          {
            label: "类别",
            prop: "type",
            type: 'select',
            options: [
              {
                label: '甜品',
                value: '0'
              },
              {
                label: '水果',
                value: 1
              }
            ]
          },
          {
            label: "picture使用",
            prop: "picture",
            type: "input"
          }
        ],
        tableData5: [
          {
            name: "好滋好味鸡蛋仔",
            date: '2021-01-20',
            type: '甜品',
            picture: "10003"
          },
          {
            name: "鹿角巷奶茶",
            date: '2021-01-20',
            type: '甜品',
            picture: "10003"
          },
          {
            name: "富士苹果",
            date: '2021-01-20',
            type: '甜品',
            picture: "10003"
          },
        ],
        btnGroup:[
          {
            label: 'edit',
            value: '编辑'
          },
          {
            label: 'delete',
            value: '删除'
          }
        ],
        picture: {
          picture: "999,99"
        }
      };
    }
  }
</script>
显示代码 复制代码

# 基础表格

日期
姓名
地址
2016-05-02
王小虎
上海市普陀区金沙江路 1518 弄
2016-05-04
王小虎
上海市普陀区金沙江路 1517 弄
2016-05-01
王小虎
上海市普陀区金沙江路 1519 弄
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
<template>
  <aui-table :head-data="headData" :data="tableData"></aui-table>
</template>

<script>
  export default {
    data() {
      return {
        headData: [
          {
            label: "日期",
            prop: "date",
            type: "date",
          },
          {
            label: "姓名",
            prop: "name",
            type: "input",
          },
          {
            label: "地址",
            prop: "address",
            type: "input",
          },
        ],
        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 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
  };
</script>
显示代码 复制代码

# 隐藏列的表格

日期
地址
2016-05-02
上海市普陀区金沙江路 1518 弄
2016-05-04
上海市普陀区金沙江路 1517 弄
2016-05-01
上海市普陀区金沙江路 1519 弄
2016-05-03
上海市普陀区金沙江路 1516 弄
2016-05-03
上海市普陀区金沙江路 1516 弄
<template>
  <aui-table
    :head-data="headData"
    :data="tableData"
    :cols-hide="['name']"
  >
  </aui-table>
</template>

<script>
  export default {
    data() {
      return {
        headData: [
          {
            label: "日期",
            prop: "date",
            type: "date",
          },
          {
            label: "姓名",
            prop: "name",
            type: "input",
          },
          {
            label: "地址",
            prop: "address",
            type: "input",
          },
        ],
        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 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
  };
</script>
显示代码 复制代码

# 索引

status-column-type 属性的 index 索引类型

#
日期
姓名
地址
操作
1
2016-05-02
王小虎
上海市普陀区金沙江路 1518 弄
2
2016-05-04
王小虎
上海市普陀区金沙江路 1517 弄
3
2016-05-01
王小虎
上海市普陀区金沙江路 1519 弄
4
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
5
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
#
日期
姓名
地址
操作
1
2016-05-02
王小虎
上海市普陀区金沙江路 1518 弄
2
2016-05-04
王小虎
上海市普陀区金沙江路 1517 弄
3
2016-05-01
王小虎
上海市普陀区金沙江路 1519 弄
4
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
5
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
<template>
  <aui-table
    :head-data="headData"
    :data="tableData"
    status-column-type="index"
    :btn-group="operateBtnGroup"
    @click-button="clickButton"
  >
  </aui-table>
</template>

<script>
  export default {
    methods: {
      clickButton(scope, item) {
        alert(`点击了${item.value}`);
      },
    },
    data() {
      return {
        headData: [
          {
            label: "日期",
            prop: "date",
            type: "date",
          },
          {
            label: "姓名",
            prop: "name",
            type: "input",
          },
          {
            label: "地址",
            prop: "address",
            type: "input",
          },
        ],
        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 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        operateBtnGroup: [
          {
            label: "edit",
            value: "编辑",
          },
          {
            label: "delete",
            value: "删除",
          },
        ],
      };
    },
  };
</script>
显示代码 复制代码

# 单选

status-column-type 属性的 radio 单选类型

日期
姓名
地址
2016-05-02
王小虎
上海市普陀区金沙江路 1518 弄
2016-05-04
王小虎
上海市普陀区金沙江路 1517 弄
2016-05-01
王小虎
上海市普陀区金沙江路 1519 弄
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
<template>
  <aui-table
    :head-data="headData"
    :data="tableData"
    status-column-type="radio"
  >
  </aui-table>
</template>

<script>
  export default {
    data() {
      return {
        headData: [
          {
            label: "日期",
            prop: "date",
            type: "date",
          },
          {
            label: "姓名",
            prop: "name",
            type: "input",
          },
          {
            label: "地址",
            prop: "address",
            type: "input",
          },
        ],
        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 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
  };
</script>
显示代码 复制代码

# 多选

status-column-type 属性的 selection 多选类型

日期
姓名
地址
2016-05-02
王小虎
上海市普陀区金沙江路 1518 弄
2016-05-04
王小虎
上海市普陀区金沙江路 1517 弄
2016-05-01
王小虎
上海市普陀区金沙江路 1519 弄
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
2016-05-03
王小虎
上海市普陀区金沙江路 1516 弄
<template>
  <aui-table
    :head-data="headData"
    :data="tableData"
    status-column-type="selection"
  >
  </aui-table>
</template>

<script>
  export default {
    data() {
      return {
        headData: [
          {
            label: "日期",
            prop: "date",
            type: "date",
          },
          {
            label: "姓名",
            prop: "name",
            type: "input",
          },
          {
            label: "地址",
            prop: "address",
            type: "input",
          },
        ],
        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 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
  };
</script>
显示代码 复制代码

# 展开行

status-column-type 属性的 expand 展开类型

商品 ID
商品名称
商品描述
12987122
好滋好味鸡蛋仔
荷兰优质淡奶，奶香浓而不腻
12987123
好滋好味鸡蛋仔
荷兰优质淡奶，奶香浓而不腻
12987125
好滋好味鸡蛋仔
荷兰优质淡奶，奶香浓而不腻
12987126
好滋好味鸡蛋仔
荷兰优质淡奶，奶香浓而不腻
<template>
  <aui-table
    :data="tableData6"
    :head-data="tableHeadData6"
    status-column-type="expand"
  >
    <template slot="expand" slot-scope="props">
      <aui-form label-position="left" inline class="demo-table-expand">
        <aui-form-item label="商品名称">
          <span>{{ props.row.name }}</span>
        </aui-form-item>
        <aui-form-item label="所属店铺">
          <span>{{ props.row.shop }}</span>
        </aui-form-item>
        <aui-form-item label="商品 ID">
          <span>{{ props.row.id }}</span>
        </aui-form-item>
        <aui-form-item label="店铺 ID">
          <span>{{ props.row.shopId }}</span>
        </aui-form-item>
        <aui-form-item label="商品分类">
          <span>{{ props.row.category }}</span>
        </aui-form-item>
        <aui-form-item label="店铺地址">
          <span>{{ props.row.address }}</span>
        </aui-form-item>
        <aui-form-item label="商品描述">
          <span>{{ props.row.desc }}</span>
        </aui-form-item>
      </aui-form>
    </template>
  </aui-table>
</template>

<script>
  export default {
    data() {
      return {
        tableHeadData6: [
          {
            label: "商品 ID",
            prop: "id",
          },
          {
            label: "商品名称",
            prop: "name",
          },
          {
            label: "商品描述",
            prop: "desc",
          },
        ],
        tableData6: [
          {
            id: "12987122",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
          {
            id: "12987123",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
          {
            id: "12987125",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
          {
            id: "12987126",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
        ],
      };
    },
  };
</script>

<style>
  .demo-table-expand {
    font-size: 0;
    width: 85%;
    margin: 0 auto;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .aui-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
显示代码 复制代码

# 排序

对表格进行排序，可快速查找或对比数据。

学号
姓名
地址
4
王小虎-4
上海市普陀区金沙江路 1518 弄
3
王小虎-3
上海市普陀区金沙江路 1518 弄
2
王小虎-2
上海市普陀区金沙江路 1518 弄
1
王小虎-1
上海市普陀区金沙江路 1518 弄
0
王小虎-0
上海市普陀区金沙江路 1518 弄
<template>
  <div>
    <aui-table
      :head-data="lazyHeadData"
      :data="sortTableData"
      :default-sort="defaultSort"
      :sortable="true"
    >
    </aui-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        lazyHeadData: [
          {
            label: "学号",
            prop: "number",
          },
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "地址",
            prop: "address",
            sortable: false,
          },
        ],
        sortTableData: [],
        defaultSort: {
          prop: "number",
          order: "descending",
        },
      };
    },
    methods: {
      generateTableData(length) {
        let array = [];
        for (let i = 0; i < length; i++) {
          array.push({
            number: i,
            name: `王小虎-${i}`,
            address: "上海市普陀区金沙江路 1518 弄",
          });
        }
        return array;
      },
    },
    mounted() {
      this.sortTableData = this.generateTableData(5);
    },
  };
</script>
显示代码 复制代码

# 表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。

ID
姓名
数值 1（元）
数值 2（元）
数值 3（元）
12987122
王小虎
234
10
10
12987123
王小虎
165
12
12
12987124
王小虎
324
9
9
12987125
王小虎
621
17
17
12987126
王小虎
539
15
15
总价
1883
63
63
ID
姓名
数值 1（元）
数值 2（元）
数值 3（元）
12987122
王小虎
234
10
10
12987123
王小虎
165
12
12
12987124
王小虎
324
9
9
12987125
王小虎
621
17
17
12987126
王小虎
539
15
15
总价
N/A
1883 元
63 元
63 元
<template>
  <div>
    <aui-table
      :head-data="summaryHeadData"
      :data="summaryTableData"
      :show-summary="true"
      sum-text="总价"
    >
    </aui-table>
    <aui-table
      :head-data="summaryHeadData"
      :data="summaryTableData"
      :show-summary="true"
      :summary-method="getSummaries"
      style="margin-top: 20px"
    >
    </aui-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        summaryHeadData: [
          {
            label: "ID",
            prop: "id",
            width: 180,
          },
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "数值 1（元）",
            prop: "amount1",
          },
          {
            label: "数值 2（元）",
            prop: "amount3",
          },
          {
            label: "数值 3（元）",
            prop: "amount3",
          },
        ],
        summaryTableData: [
          {
            id: "12987122",
            name: "王小虎",
            amount1: "234",
            amount2: "3.2",
            amount3: 10,
          },
          {
            id: "12987123",
            name: "王小虎",
            amount1: "165",
            amount2: "4.43",
            amount3: 12,
          },
          {
            id: "12987124",
            name: "王小虎",
            amount1: "324",
            amount2: "1.9",
            amount3: 9,
          },
          {
            id: "12987125",
            name: "王小虎",
            amount1: "621",
            amount2: "2.2",
            amount3: 17,
          },
          {
            id: "12987126",
            name: "王小虎",
            amount1: "539",
            amount2: "4.1",
            amount3: 15,
          },
        ],
      };
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "总价";
            return;
          }
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " 元";
          } else {
            sums[index] = "N/A";
          }
        });

        return sums;
      },
    },
  };
</script>
显示代码 复制代码

# Attributes

属性 说明 类型 可选值 默认值
head-data 表头数据 HeadData[] - []
data 表格数据 Data[] - []
btn-group 操作按钮 Btn[] - []
picture 输入控制 Picture[] - -
column-formatter 用来格式化内容 function - -
is-edit 是否可编辑 boolean true | false true
is-add 是否可增加空白行 boolean true | false false
disabled 是否禁用 boolean true | false false
default-addlength 表格数据为空时默认增加可编辑数据条数,is-add=true 生效 number - 5
cols-hide 隐藏的列数据 string[] - []
combination-key 表格绑定的快捷键列表 string[] - -
highlight-current-row 是否要高亮当前行 boolean true | false true
auto-add-row 空白表格是否自动添加空白行 boolean true | false true
empty-text 空数据时显示的文本内容 string - 暂无数据
show-summary 是否在表尾显示合计行 boolean true | false false
summary-method 自定义的合计计算方法 function - -
text-align 对齐方式 string left | center | right left
pagingType 分页组件类型 string simple| complex complex
page-size 分页组件每页显示条目个数 number - 10
current-page-index 分页组件当前页数 number - 1
pagination-layout 分页组件组件布局，子组件名用逗号分隔 string - -
pagination-page-sizes 分页组件每页显示个数选择器的选项设置 number[] - [10, 20, 30, 40, 50, 100]
pagination-prev-text 分页组件替代图标显示的上一页文字 string - -
pagination-next-text 分页组件替代图标显示的下一页文字 string - -
total-num 分页组件总数 number - -
status-column-type 表格序列的类型 string selection | radio | index |expand -
pagination-show 内置分页器是否显示 boolean true | false false
tile-operate-button 操作列按钮是否平铺 boolean true | false false
doubleClick 双击切换编辑状态 boolean true | false false

# Events

事件名 描述 参数
select-all 当用户手动勾选全选 Checkbox时触发的事件 selection
selection-change 当选择项发生变化时会触发该事件 selection
cell-mouse-enter 当单元格 hover进入时会触发该事件 row, column, cell, event
cell-mouse-leave 当单元格 hover退出时会触发该事件 row, column, cell, event
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
row-click 当某一行被点击时会触发该事件 row, event, column,index
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, event
row-dblclick 当某一行被双击时会触发该事件 row, event
header-click 当某一列的表头被点击时会触发该事件 column, event
header-contextmenu 当某一列的表头被鼠标右键点击时触发该事件 column, event
sort-change 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
filter-change 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key是 column的 columnKey，对应的 value为用户选择的筛选条件的数组。 filters
current-radio-change 仅对 type=radio 的列有效,当用户手动勾选单选模式的 Checkbox时触发的事件 currentRow, oldCurrentRow
size-change 分页组件中每页显示行数发生变化时触发该事件 每页条数size
current-page-change currentPage改变时会触发 当前页currentPage
click-button 表格行内按钮触发事件 scope,item
cellBlur 光标离开表格栏位触发此事件 scope,index
cellChange 表格栏位值发生变化时触发的事件 scope,index
combination 在表格内按表格自定义快捷键触发此事件 currentRow,rowindex, columnindex
previous-page 简单分页工具的上一步的事件回调
next-page 简单分页工具下一步的事件回调

# Methods

方法名 描述 参数
clearSelection 用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 -
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected为 true 则选中） -
setCurrentRadioRow 用于 type=radio 的单选表格，设定某一行为选中行，如果调用时不加参数，则会取消当前选中行。 -
clearSort 用于清空排序条件，数据会恢复成未排序的状态 -
clearFilter 用于清空过滤条件，数据会恢复成未过滤的状态 -
getActualData 获取当前表格展示的数据 -

# HeadData

属性 说明 类型 可选值 默认值
type 对应列的类型。 string selection|index|expand| date|input|select|cascader -
options type=select,cascader生效 string - -
isEdit 列是否可编辑 boolean true | false false
readonly 列是否可读,type=input生效 boolean true | false false
isHide 列是否隐藏 boolean true | false false
label 显示的标题 string - -
prop 对应列内容的字段名 string - -
width 对应列的宽度 string - -
minWidth 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 string - -
fixed 列是否固定在左侧或者右侧，true 表示固定在左侧 string | boolean left | right | true -
sortable 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 boolean | string true | false | 'custom' -
sortMethod 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 function(a,b) - -
sortBy 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推。 string | array | function(row,index) - -
formatter 用来格式化内容 function(row,column,cellValue) - -
showOverflowTooltip 当内容过长被隐藏时显示 tooltip boolean true | false false
align 对齐方式 string left | right | center left
selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 function(row,index) - -
isCopy 控制列是否显示复制功能 boolean true | false true
focusAutoIn 焦点管控页面表格获取焦点时是否直接进入表格内 boolean true | false false
propsData 可编辑输入框props对象(input、select)

# Data

对象结构,key为HeadData的prop的值,value为数据

# Btn-Group

属性 类型 说明
label String 按钮的标识符
value String 按钮显示的文本

# Picture

对象结构,key为HeadData的prop的值,value为picture规则

Last Updated: 2022/4/15 下午5:07:24

Tabs 标签页