design-vue-ui

# d-table 表格

# 何时使用


扩展 a-table 组件:

  1. 自定义滑动横向滚动条（与原生滑动条互补）;
  2. 增加一些固定的 row 选项回显效果 （c-index c-tip c-badge）
  3. 当前组件主要是定制化使用，无定制建议不要使用
  4. 如果只是为了使用 sticky 的效果，建议单独使用 d-scroll-bar

# 代码演示

基本

支持大多数 a-table 的 API 属性，sticky 不生效，请检查父容器是否存在宽度或overflow等使 position: sticky; 不生效

常规功能大多支持
显示代码 
<template>
  <div class="xm-main">
    <d-table
      :columns="columns"
      :dataSource="dataSource"
      @setColumns="setColumns"
      :total="dataSource.length"
    >
    </d-table>
    <d-table
      :columns="columns"
      :dataSource="dataSource"
      @setColumns="setColumns"
      :showPag="false"
      sticky
      rowKey="key"
      :scroll="{ x: 1800 }"
    >
    </d-table>
  </div>
</template>
<script>
const columns = [
  {
    title: 'name',
    dataIndex: 'name',
    width: '25%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'age',
    dataIndex: 'age',
    width: '15%',
    scopedSlots: { customRender: 'age' },
  },
  {
    title: 'address',
    dataIndex: 'address',
    width: '40%',
    scopedSlots: { customRender: 'address' },
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

const data = [];
for (let i = 0; i < 4; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
export default {
  data() {
    return {
      dataSource: data,
      columns,
    };
  },
  methods: {
    setColumns (value) {
      this.columns = value
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
显示代码
支撑的几个常用 customRender

c-tip / c-badge / c-index

c-index : 序号，自动
c-tip: 规定数外溢出鼠标移入效果显示
c-badge: 状态控制，与 a-badge 的 status 属性绑定，可自定义，方式往下
显示代码 
<template>
  <div class="xm-main">
    <d-table :columns="columns" :dataSource="dataSource" :total="dataSource.length" @setColumns="setColumns">
      <template #operation>
        <a-space>
          <a-button type="link" block>禁用</a-button>
        </a-space>
      </template>
    </d-table>
  </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: '100px',
    scopedSlots: { customRender: 'c-index' },
  },
  {
    title: '姓名',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '年龄',
    dataIndex: 'age',
    scopedSlots: { customRender: 'age' },
  },
  {
    title: '原始地址',
    dataIndex: 'address1',
    scopedSlots: {
      customRender: 'c-tip',
    },
  },
  {
    title: '地址',
    dataIndex: 'address',
    scopedSlots: {
      customRender: 'c-tip',
      bind: {
        len: 12
      },
      bindObj: {
        content(text, record, index){
          return index + '-' + text
        }
      }
    },
  },
  {
    title: '启用状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'c-badge' },
  },
  {
    title: '自定义状态',
    dataIndex: 'cusStatus',
    scopedSlots: { 
      customRender: 'c-badge',
      status: {
        1: 'processing',
        0: 'error',
        2: 'warning'
      },
      txt: {
        1: '进行中',
        2: '已撤回',
        0: '失败'
      }
     },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

const data = [];
for (let i = 0; i < 24; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address1: `中华人民共和国-四川省-巴拉巴拉市-巴拉巴拉去${i}`,
    address: `中华人民共和国-四川省-巴拉巴拉市-巴拉巴拉去${i}`,
    status: i % 3,
    cusStatus: i % 3,
  });
}
export default {
  data() {
    return {
      dataSource: data,
      columns,
    };
  },
  methods: {
    setColumns(value) {
      this.columns = value
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
显示代码 
export default {
  DTable: {
    comKeys: ['c-badge', 'c-tip'],
    // 自定义 组件集合
    comsConfig: {
      'c-badge': {
        is: 'a-badge',
        txtType: 'prop', // text prop
        // 原版bind
        bind: {},
        // 根据参数返回的bind
        bindObj: {
          text (text, record) {
            const _obj = {
              1: '已启用',
              0: '已停用',
              '-1': '已禁用',
              default: '未知'
            }
            return _obj[text] || _obj.default
          },
          status (text, record) {
            const _obj = {
              1: 'success',
              0: 'warning',
              default: 'error'
            }
            return _obj[text] || _obj.default
          }
        }
      },
      'c-tip': {
        is: 'd-tooltip',
        txtType: 'prop', // text prop
        // 原版bind
        bind: {},
        // 根据参数返回的bind
        bindObj: {
          content (text, record) {
            return text
          }
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# API

# Table

支撑 a-table 多个属性

# columns

继承 a-table 的 columns 属性

# columnSet

# 事件

对应 a-table 中的事件，并新增以下事件

← d-search 表格搜索区 →