Avue

表头配置

... 2021-7-29 About 3 min

# 表头配置

# 固定表头

设置height时当表格的高度超过设定值，就会出现滚动条，从而达到固定表头的效果

<avue-crud :data="data" :option="option" ></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          },{
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          },{
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          },{
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          height:300,
          column:[
             {
              label:'姓名',
              prop:'name',
              width:200,
              fixed:true
            }, {
              label:'性别',
              width:300,
              prop:'sex'
            }, {
              label:'日期',
              width:300,
              prop:'datetime'
            }, {
              label:'地址',
              width:300,
              prop:'address'
            }
          ]
        },
      };
    },
    methods: {
    }
}
</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
Expand Copy

# 隐藏表头

设showHeader属性为false即可隐藏表头

<avue-crud :data="data" :option="option" ></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          showHeader:false,
          column:[
             {
              label:'姓名',
              prop:'name',
              width:200,
              fixed:true
            }, {
              label:'性别',
              width:300,
              prop:'sex'
            }, {
              label:'日期',
              width:300,
              prop:'datetime'
            }, {
              label:'地址',
              width:300,
              prop:'address'
            }
          ]
        },
      };
    },
    methods: {
    }
}
</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
Expand Copy

# 自定义表头样式

Tips

2.12.3+

.warning-row{
 background-color: #F56C6C !important;
 color:#fff;
}
.success-row{
 background-color: #67C23A !important;
 color:#fff;
}
1
2
3
4
5
6
7
8

可以通过指定 组件的 header-class-name

<avue-crud :data="data" :option="option" :header-cell-class-name="headerCellClassName"
             :header-row-class-name="headerRowClassName" ></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
       headerRowClassName ({ rowIndex }) {
        console.log({ rowIndex })
      },
      headerCellClassName ({ column, columnIndex, row, rowIndex }) {
        if (columnIndex == 0) {
          return 'warning-row'
        } else if (columnIndex == 1) {
          return 'success-row'
        }
      } 
    }
}
</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
Expand Copy

# 表头单元格样式

Tips

2.12.3+

开放了header-cell-style和header-row-style方法

<avue-crud :data="data" :option="option"  :header-row-style="headerRowStyle"
             :header-cell-style="headerCellStyle" ></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
       headerRowStyle ({ rowIndex }) {
          console.log({ rowIndex })
        },
        headerCellStyle ({ column, columnIndex, row, rowIndex }) {
          if (columnIndex == 0) {
            return {
              color: 'green',
              fontWeight: 'bold',
              fontSize: '20'
            }
          } else {
            return {
              color: 'red',
              fontWeight: 'bold',
              fontSize: '20'
            }
          }
        }
    }
}
</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
Expand Copy

# 多级表头

Tips

1.0.9+

Tips

只要在配置中添加children层级嵌套即可


<avue-crud :option="option" :data="data" ></avue-crud>
<script>
export default {
    data() {
      return {
        option: {
          excelBtn:true,
          border: true,
          index: true,
          expandLevel: 3,
          headerAlign: 'center',
          align: 'center',
          tree: true,
          labelWidth: 100,
          column: [{
            label: '姓名',
            prop: 'name',
            width:140,
          }, {
            label: '性别1',
            prop: 'sex',
          },
          {
            label: '自定义图标',
            prop: 'icon',
            type: "icon",
            iconList: [{
              label: '基本图表',
              list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
            }]
          }, {
            label: '多级表头',
            children: [{
              label: '信息',
              children: [{
                label: '年龄',
                prop: 'age'
              }, {
                label: '手机号',
                prop: 'phone',
              }]
            }, {
              label: '地区',
              prop: 'address',
              type: 'select',
              props: {
                  label: 'name',
                  value: 'code'
              },
              dicUrl:'https://cli.avuejs.com/api/area/getProvince'
            }]
          }, {
            label: '测试',
            prop: 'test',
          },
          {
            label: '手机信息1',
            prop: 'phone1'
          }],
        },
        data: [{
          name: '张三',
          age: 14,
          address: '110000',
          phone1: '17547400800',
          phone: '17547400800',
          icon: 'el-icon-time',
          test: 1,
          sex: '男'
        }, {
          name: '王五',
          age: 10,
          address: '120000',
          test: 1,
          sex: '女',
          icon: 'el-icon-star-on',
          phone1: '17547400800',
          phone: '17547400800'
        }]
      }
    }
}
</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
Expand Copy

# 自定义列表头

Tips

1.0.8+

设置列的属性headerslot为true，在卡槽中指定列的prop加上Header作为卡槽的名称,


<avue-crud ref="crud" :option="option" :data="data">
  <template slot="nameHeader" slot-scope="{column}">
      <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag>
  </template>
</avue-crud>
<script>
export default {
    data() {
      return {
        option: {
          column: [{
            label: '姓名',
            prop: 'name',
            headerslot:true,
          }, {
            label: '年龄',
            prop: 'sex'
          }]
        },
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
      }
    }
}
</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
Expand Copy

# 自定义菜单栏左边

卡槽为menuLeft为表格菜单左边的位置

<avue-crud :data="data" :option="option">
  <template slot="menuLeft" slot-scope="{size}">
    <el-button type="primary" :size="size">自定义按钮</el-button>
  </template>
</avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</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
Expand Copy

# 自定义菜单栏右边

卡槽为menuRight为表格菜单右边的位置

<avue-crud :data="data" :option="option">
  <template slot="menuRight" slot-scope="{size}">
     <el-button type="primary" icon="el-icon-edit" circle :size="size"></el-button>
  </template>
</avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</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
Expand Copy
Last update: May 28, 2024 08:28
Contributors: smallwei

表格行配置项

您正在浏览基于 Vue 2.x 的 Avue 文档; 点击这里 查看 Vue 3.x 的升级版本