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