- 说明

- 配置

- 代码示例

- 组件

  - 通用表格组件
    - 普通表格
    - 带复选框的表格
    - 带插槽的表格
    - Table Attributes
    - Table Events
    - Table Slot
    - Table Header style
  - 表单组件
  - 流程图组件
  - 流程图组件之编辑

- 前端
- 组件

haocheng Liu
2021-02-03

# 通用表格组件

# # 通用表格组件

## # 普通表格

普通表格，仅传入数据显示

代码块

ts版本

    <template>
      <div>
        <table-head-co
          ref="tableCo"
          :form-list="tableList"
          :table-heads="tableHead"
          :width="200"
          :cellAlign="center"
        />
      </div>
    </template>
    <script>
    import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
    import { Component, Prop, Vue } from 'vue-property-decorator'

    @Component({
      name: 'commonExample',
      components: {
        tableHeadCo,
      }
    })
    export default class extends Vue {
        tableHead:any[] = [
          { fieldName: 'date', nameCn: '日期', isHead: 1 },
          { fieldName: 'name', nameCn: '姓名', isHead: 1 },
          { fieldName: 'address', nameCn: '地址', isHead: 1 },
        ]
        tableList:any[] = [{
                date: '2016-05-02',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-04',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-01',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-03',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }]
    }
    </script>
    <style scoped>

    </style>

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

js版本

    <template>
      <div>
        <table-head-co
          ref="tableCo"
          :form-list="tableList"
          :table-heads="tableHead"
          :width="200"
          :cellAlign="center"
        />
      </div>
    </template>
    <script>
    import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'

    export default {
      components: {
        tableHeadCo
      },
      data(){
        return {
          tableHead: [
          { fieldName: 'date', nameCn: '日期', isHead: 1 },
          { fieldName: 'name', nameCn: '姓名', isHead: 1 },
          { fieldName: 'address', nameCn: '地址', isHead: 1 },
        ],
        tableList: [{
                date: '2016-05-02',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-04',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-01',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-03',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }]
        }
      }
    }
    </script>
    <style scoped>

    </style>

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

## # 带复选框的表格

带复选框的表格，提供复选框回调函数，点击复选框时可打开控制台查看打印内容。

代码块

ts版本

    <template>
      <div>
        <table-head-co
          ref="tableCo"
          :form-list="tableList"
          :table-heads="tableHead"
          :width="200"
          :check-box-visible="true"
          @handle-selection-change="handleSelectionChange"
        />
      </div>
    </template>
    <script>
    import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
    import { Component, Prop, Vue } from 'vue-property-decorator'

    @Component({
      name: 'commonExample',
      components: {
        tableHeadCo,
      }
    })
    export default class extends Vue {
        tableHead:any[] = [
          { fieldName: 'date', nameCn: '日期', isHead: 1 },
          { fieldName: 'name', nameCn: '姓名', isHead: 1 },
          { fieldName: 'address', nameCn: '地址', isHead: 1 },
        ]

        tableList:any[] = [{
                date: '2016-05-02',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-04',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-01',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-03',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }]

        // 复选框监听事件
        handleSelectionChange(val){
          console.log(val)
        }
    }
    </script>
    <style scoped>

    </style>

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

js版本

    <template>
      <div>
        <table-head-co
          ref="tableCo"
          :form-list="tableList"
          :table-heads="tableHead"
          :width="200"
          :check-box-visible="true"
          @handle-selection-change="handleSelectionChange"
        />
      </div>
    </template>
    <script>
    import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'

    export default {
      components: {
        tableHeadCo
      },
      data(){
        return {
          tableHead: [
          { fieldName: 'date', nameCn: '日期', isHead: 1 },
          { fieldName: 'name', nameCn: '姓名', isHead: 1 },
          { fieldName: 'address', nameCn: '地址', isHead: 1 },
        ],
        tableList: [{
                date: '2016-05-02',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-04',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-01',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-03',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }]
        }
      },
      methods:{
        // 复选框改变监听事件
        handleSelectionChange(val){
          console.log(val)
        }
      }
    }
    </script>
    <style scoped>

    </style>

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

## # 带插槽的表格

表格组件提供插槽功能，可以将插槽设置成按钮等其他功能，点击编辑按钮可以查看控制台打印内容。

代码块

ts版本

    <template>
      <div>
        <table-head-co
          ref="tableCo"
          :form-list="tableList"
          :table-heads="tableHead"
          :width="200"
          :slot-visible="true"
        >
          <template
            v-slot="scope"
          >
            <el-button
              size="mini"
              @click="showEdit(scope.item.row)"
            >
              编辑
            </el-button>
          </template>
        </table-head-co>
      </div>
    </template>
    <script>
    import tableHeadCo from '../Co/tableHeadCo'
    import { Component, Prop, Vue } from 'vue-property-decorator'

    @Component({
      name: 'commonExample',
      components: {
        tableHeadCo,
      }
    })
    export default class extends Vue {
        tableHead:any[] = [
          { fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
          { fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
          { fieldName: 'address', nameCn: '地址', isHead: 1 },
        ]
        tableList:any[] = [{
                date: '2016-05-02',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-04',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-01',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-03',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }]

        // 点击事件
        showEdit(val){
          console.log(val)
        }
    }
    </script>
    <style scoped>

    </style>

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

js版本

    <template>
      <div>
        <table-head-co
          ref="tableCo"
          :form-list="tableList"
          :table-heads="tableHead"
          :width="200"
          :slot-visible="true"
        >
          <template
            v-slot="scope"
          >
            <el-button
              size="mini"
              @click="showEdit(scope.item.row)"
            >
              编辑
            </el-button>
          </template>
        </table-head-co>
      </div>
    </template>
    <script>
    import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'

    export default {
      components: {
        tableHeadCo
      },
      data(){
        return {
          tableHead: [
          { fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120  },
          { fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100  },
          { fieldName: 'address', nameCn: '地址', isHead: 1 },
        ],
        tableList: [{
                date: '2016-05-02',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-04',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-01',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }, {
                date: '2016-05-03',
                name: '小明',
                address: '北京市海淀区中关村南四街'
              }]
        }
      },
      methods:{
        showEdit(val){
          console.log(val)
        }
      }
    }
    </script>
    <style scoped>

    </style>

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

## # Table Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
check-box-visible | 是否显示复选框 | Boolean | - | false
table-heads | 表头 | Array | - | -
form-list | 需要显示的数据 | Array | - | -
loading | 表格加载动画 | Boolean | - | false
formatter | 格式化表格数据 | Function(row, column, cellValue, index) | - | -
cellAlign | 表格对齐方式 | String | left/center/right | center
slotVisible | 是否显示操作列 | Boolean | - | false
width | 操作列的宽度 | Number | - | 200

## # Table Events

事件名 | 说明 | 参数
--- | --- | ---
handle-selection-change | 当用户手动勾选数据行的 Checkbox 时触发的事件 | row
handle-sort-change | 当表格的排序条件发生变化的时候会触发该事件 | column

## # Table Slot

name | 说明
--- | ---
- | 用于放置在操作列上的按钮等元素，需要从scope.item中获取当前行的值

## # Table Header style

name | 说明
--- | ---
header-cell-style | 用于设置表头样式

上次更新: 2021/02/03, 17:01:33
新增页面示例
表单组件

← 新增页面示例 表单组件→

最近更新

  01
DataMap
02-05

  02
实体类
02-05

  03
update操作
02-05

更多文章>

Theme by Vdoing | Copyright © 2021-2023 Haocheng Liu | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式