Jst UI

# Table 表格

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

# 基础表格

基础使用表格colConfig数据配置方式，若无需表尾则data-page传null即可
1A2023-1-1confirmed123
2B2023-1-1confirmed124
3C2023-1-1confirmed125
4A2023-1-1confirmed126
5B2023-1-1confirmed127
6C2023-1-1confirmed128
每页记录数
10
50
200
共
0
条
1
/
0
页
<j-row>
  <j-table
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :data="list"
  />
</j-row>
<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            name: 'name',
            label: '名称',
            width: '200px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 行号及多选

行号默认开启，如需关闭请配置:index-col='false'，配置check-col可开启多选
配置数据中$checked:true来实现默认选中。
A2023-1-1confirmed123
B2023-1-1confirmed124
C2023-1-1confirmed125
A2023-1-1confirmed126
B2023-1-1confirmed127
C2023-1-1confirmed128
 
<j-row>
  <j-table
    check-col
    :index-col="false"
    :data-page="null"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :data="list"
  />
</j-row>
<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            name: 'name',
            label: '名称',
            width: '200px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 自定义列模板

自定义列的显示内容，可组合其他组件使用。
A2023-1-1123
B2023-1-1124
C2023-1-1125
A2023-1-1126
B2023-1-1127
C2023-1-1128
每页记录数
10
50
200
共
0
条
1
/
0
页

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。如果您的模板是自定义的，您可以直接将slot与prop同名即可无需声明template字段

<j-row>
  <j-table
    check-col
    :index-col="false"
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :data="list"
  >
    <j-table-td slot="status" class="nimabanji caonimamade" style="left:10px;top:0;" slot-scope="{ cellData,rowData,$index }">
      <j-button
        :class="cellData=='shipped'?'success small':'small'"
        type="primary"
        @click="btnClick(cellData,rowData)"
      >{{ cellData }}</j-button>
    </j-table-td>
  </j-table>
</j-row>
<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            name: 'name',
            label: '名称',
            width: '200px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 自定义表头

表头支持自定义。
A2023-1-1confirmed123
B2023-1-1confirmed124
C2023-1-1confirmed125
A2023-1-1confirmed126
B2023-1-1confirmed127
C2023-1-1confirmed128
每页记录数
10
50
200
共
0
条
1
/
0
页

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

<j-row>
  <j-table
    check-col
    :index-col="false"
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :data="list.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
  >
    <template slot="name.header" slot-scope="scope">
        <j-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
  </j-table>
</j-row>
<script>
  export default {
    data() {
      return {
        search:'',
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            name: 'name',
            label: '名称',
            width: '200px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 排序

对表格进行排序，可快速查找或对比数据。
1A2023-1-2confirmed129
2B2023-12-8confirmed122
3C2023-11-6confirmed124
4A2023-2-3confirmed126
5B2023-4-4confirmed121
6C2023-1-1confirmed128
每页记录数
10
50
200
共
0
条
1
/
0
页

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

<template>
  <j-table
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :default-sort="{name: 'sku_id', sort: 'ascending'}"
    :data="list"
    @sort-change="handleSortChange"
  />
  </j-row>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-1-2', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 129, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-12-8', status: 'confirmed', end_datetime: '', sku_id: 122, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-11-6', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'A', i_id: '2023-2-3', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'B', i_id: '2023-4-4', status: 'confirmed', end_datetime: '', sku_id: 121, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: 'C', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            name: 'name',
            label: '名称',
            width: '200px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            sortable:'column',
            width: '100px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            sortable:true,
            width: '100px'
          }
        ],
      };
    },
    methods: {
      handleSortChange(data)
      {
        console.log('-------列数据排序-------');
        console.log(data);
        console.log('-name：列名--sort:顺序-');
      },
    }
  };
</script>
显示代码 复制代码

# 多级表头

支持多级表头来展现数据的层次关系。
1ABc2023-1-1aonfirmed123
2ABc2023-1-1confirmed124
3ABc2023-1-1bonfirmed125
4ABc2023-1-1fonfirmed126
5ABc2023-1-1donfirmed127
6ABc2023-1-1eonfirmed128
每页记录数
10
50
200
共
0
条
1
/
0
页
<j-row>
  <j-table
    check-col
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:380px;width:100%"
    class="large"
    :col-config="colConfig"
    :data="list"
  >
    <j-table-td slot="name3" slot-scope="{cellData}" style="color:#FF0101"><j-tag>{{cellData}}</j-tag></j-table-td>
    <span slot="name3.header" slot-scope="{column}" style="color:#FF0101">
      {{column.label}}
    </span>
  </j-table>
</j-row>
<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name1: 'A', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'aonfirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name1: 'A', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name1: 'A', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'bonfirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name1: 'A', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'fonfirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name1: 'A', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'donfirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name1: 'A', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'eonfirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            label: '名称',
            children: [
              {
                name: 'name1',
                label: '姓氏',
                width: '60px'
              },
              {
                label: '名字',
                children: [
                  {
                    name: 'name2',
                    label: '名字-1',
                    width: '60px'
                  },
                  {
                    name: 'name3',
                    label: '名字-2',
                    width: '200px'
                  }
                ]
              }
            ]
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 表尾合计行

支持在表尾显示各列的合计
112.32023-1-1aonfirmed123669852
232.322023-1-1confirmed1243312.63
333.232023-1-1bonfirmed1254324.26
4123.392023-1-1fonfirmed12631245
51.632023-1-1donfirmed12786895.65
612.332023-1-1eonfirmed12886895
100000.002882524.54
每页记录数
10
50
200
共
0
条
1
/
0
页

通过totalConfig配置您想合计的列，默认合计是当前页的列合计，如需展示所有数据的总合计则需要通过value字段传入

<j-row>
  <j-table
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :total-config="[{name: 'pic'},{name:'sale_pirce',col$c:true},{name:'pirce',value:100000.002,col$c:true}]"
    :data="list"
  />
</j-row>
<script>
  export default {
    data() {
      return {
        list: [
        { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', pirce: '12.3', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'aonfirmed', $checked: true, end_datetime: '', sku_id: 123, sale_pirce: '669852' },
        { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', pirce: '32.32', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, sale_pirce: '3312.63' },
        { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', pirce: '33.23', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'bonfirmed', end_datetime: '', sku_id: 125, sale_pirce: '4324.26' },
        { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', pirce: '123.39', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'fonfirmed', end_datetime: '', sku_id: 126, sale_pirce: '31245' },
        { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', pirce: '1.63', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'donfirmed', end_datetime: '', sku_id: 127, sale_pirce: '86895.65' },
        { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', pirce: '12.33', name2: 'B', name3: 'c', i_id: '2023-1-1', status: 'eonfirmed', end_datetime: '', sku_id: 128, sale_pirce: '86895' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            width: '60px'
          },
          {
            name: 'pirce',
            label: '原价',
            width: '200px',
            cellClass: 'tCenter',
            style: { color: 'red' },
            headerClass: 'tCenter'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '100px',
            sortable: true
          },
          {
            name: 'sale_pirce',
            label: '售价',
            width: '100px'
          }
        ]
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 固定列

内容过多出现滚动条时，可以选择固定的列始终显示在最左/最右侧,最右侧激情开发中
1大苏打小苏打中苏大特大苏大2023-1-1confirmed123
2大苏打小苏打中苏大特大苏大2023-1-1confirmed124
3大苏打小苏打中苏大特大苏大2023-1-1confirmed125
4大苏打小苏打中苏大特大苏大2023-1-1confirmed126
5大苏打小苏打中苏大特大苏大2023-1-1confirmed127
6大苏打小苏打中苏大特大苏大2023-1-1confirmed128
每页记录数
10
50
200
共
0
条
1
/
0
页
<j-row>
  <j-table
    check-col
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :data="list"
  />
</j-row>
<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            fixed:true,
            width: '60px'
          },
          {
            name: 'name',
            label: '名称1',
            width: '200px'
          },
          {
            name: 'name1',
            label: '名称2',
            width: '200px'
          },
          {
            name: 'name2',
            label: '名称3',
            width: '200px'
          },
          {
            name: 'name3',
            label: '名称4',
            width: '200px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# 工具栏

表格右上角工具栏内置刷新，列配置，帮助中心及下载功能，同时也支持自定义插槽定制您的功能; 保存列配置功能需内嵌到项目中使用，本例子暂未实现保存功能；
1大苏打小苏打中苏大特大苏大2023-1-1confirmed123
2大苏打小苏打中苏大特大苏大2023-1-1confirmed124
3大苏打小苏打中苏大特大苏大2023-1-1confirmed125
4大苏打小苏打中苏大特大苏大2023-1-1confirmed126
5大苏打小苏打中苏大特大苏大2023-1-1confirmed127
6大苏打小苏打中苏大特大苏大2023-1-1confirmed128
每页记录数
10
50
200
共
0
条
1
/
0
页

默认的工具栏是不占据文档层高度的，如果您需要它占据文档层位置请通过tools-config配置{realHeight:true}来实现对应效果，其他配置项请查看下方介绍；

<j-row>
  <j-table
    check-col
    :data-page="{ 
        PageSize: 10,
        PageSizes: [
          50,
          200
        ], PageCount: 0,
        PageIndex: 1,
        DataCount: 0
      }"
    style="height:300px;width:100%"
    class="large"
    :col-config="colConfig"
    :tools-config="{realHeight:true,helpBtn:true,colConfig:{key:'test'},refresh:true, exportBtn:[{label: '订单导出', handler: () => {onJumpOrderImport()}},{label: '订单导出', handler: () => {onJumpOrderImport()}}]}"
    :data="list"
  >
    <template slot="rightTool">
      <span class="operate-list">
        <i class="icon-edit j-icon"></i>
      </span>
    </template>
  </j-table>
</j-row>
<script>
  export default {
    data() {
      return {
        list: [
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', $checked: true, end_datetime: '', sku_id: 123, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 124, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 125, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 126, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 127, pv: '' },
          { pic: 'https://img.alicdn.com/top/i1/TB1yPMWIrGYBuNjy0FoSuwiBFXa.jpg', name: '大苏打',name1: '小苏打',name2: '中苏大',name3: '特大苏大', i_id: '2023-1-1', status: 'confirmed', end_datetime: '', sku_id: 128, pv: '' }
        ],
        colConfig: [
          {
            name: 'pic',
            label: '图片',
            template: 'image',
            fixed:true,
            width: '60px'
          },
          {
            name: 'name',
            label: '名称1',
            width: '200px'
          },
          {
            name: 'name1',
            label: '名称2',
            width: '200px'
          },
          {
            name: 'name2',
            label: '名称3',
            width: '200px'
          },
          {
            name: 'name3',
            label: '名称4',
            width: '200px'
          },
          {
            name: 'i_id',
            label: 'i_id',
            width: '60px'
          },
          {
            name: 'status',
            label: 'status',
            width: '60px'
          },
          {
            name: 'sku_id',
            label: 'sku_id',
            width: '60px'
          }
        ],
      };
    },
    methods: {
     
    }
  };
</script>
显示代码 复制代码

# Table Attributes

参数 说明 类型 可选值 默认值
list 显示的数据 array — —
class 类名 string small、large —
style 样式，可设置宽高等 string — —
data-page 分页 array object { PageSize: 10,
PageSizes: [50,200],
PageCount: 0,
PageIndex: 1,
DataCount: 0}
col-config 列配置，详见col-config说明 array — —
check-col 开启多选功能 boolean — false
index-col 序号列 boolean — true
total-config 合计行 array — -
init-load-data 初始化获取数据 boolean — true
tck 分页,列配置,数据等的合集，需服务端返回列配置 object — -
tools-config 右上角工具栏目 object 详见下方列表
fixed-thead 是否开启固定表头 boolean - false ｜

# Table Events

事件名 说明 参数
row-check 行选中事件 {$event,$index: 1,data}
row-click 行点击事件 {$event,$index: 1,data}
row-dblclick 行双击事件 {$event,$index: 1,data}
load-data 获取表格数据方法 若有筛选条件则会返回筛选内容

# Table Methods

方法名 说明 参数
clearSort 清空排序条件 -
敬请 期待 ……

# Slots

name 说明
button 按钮区域
search 搜索区域
opt 操作区域
rightTool 工具栏自定义区域
tfoot 表格内部底部区域
footer-start 表格区域底部起始位置
footer 表格区域底部

# col-config

name 说明 可选值
name 列key值 ——
label 列显示名称 ——
width 列宽度 ——
fixed 列固定 ——
sortable 列排序 ——
aline 内容对齐方式 ——
headerAlint 表头内容对齐方式 ——
cellClass 表格内容附加class类名 ——
headerClass 表格表头附加class类名 ——
style 内容附加样式 ——
template 内置模板组件 image
tips 表头提示 String

# total-config

name 说明 可选值
name 需计算的列key值 ——
col$c 千分位展示 true/false
value 总计值 不传递则展示当前页数据总计

# tools-config

name 说明 可选值
helpBtn 帮助中心 boolean
colConfig 列配置 object
refresh 刷新 boolean
exportBtn 导出悬浮窗功能项 Array

← Popover 弹出框 →