Avue

表格列配置项

... 2022-3-9 About 8 min

# 表格列配置项

# 主键

很多表格操作都是依靠表格主键的(行展开，表格树等)，需要配置rowKey属性，默认为id

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

<script>
export default {
    data() {
      return {
        data: [
          {
            ids:1,
            name:'张三',
            sex:'男'
          }, {
            ids:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          rowKey:'ids',
          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
Expand Copy

# 宽度

可以配置width属性控制每列的宽度，如果不配置则会自适应

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

<script>
export default {
    data() {
      return {
        data: [
          {
            id:1,
            name:'张三',
            sex:'男'
          }, {
            id:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              width:200,
              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
Expand Copy

# 对齐方式

可以配置align属性和headerAlign属性控制对齐方式

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

<script>
export default {
    data() {
      return {
        data: [
          {
            id:1,
            name:'张三',
            sex:'男'
          }, {
            id:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          align:'center',
          headerAlign:'center',
          border:true,
          column:[
             {
              width:200,
              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
35
36
Expand Copy

# 索引

设index属性为true即可，indexLabel设置表格的序号的标题,默认为#

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

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          index:true,
          indexLabel:'序号',
          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
Expand Copy

# 自定义索引

<avue-crud :data="data" :option="option" >
  <template slot="index" slot-scope="{row,index}">
    <el-tag>{{index+1}}</el-tag>
  </template>
</avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[{
              label:'序号',
              prop:'index',
              fixed:true
            },
             {
              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
35
36
37
38
Expand Copy

# 内容超出隐藏

overHidden设置true即可超出列表宽度的内容以省略号显示

<avue-crud :data="data" :option="option"></avue-crud><script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三的名字是一个很长很长的内容',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              overHidden:true,
              width:80,
            }, {
              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
Expand Copy

# 内容格式化

formatter方法格式化内容

<avue-crud :data="data" :option="option"></avue-crud><script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男',
            select:'110000'
          }, {
            name:'李四',
            sex:'女',
            select:'120000'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              formatter:(val,value,label)=>{
                return val.name+'格式化内容'
              }
            }, {
              label:'性别',
              prop:'sex'
            },{
              label: '字典',
              prop: 'select',
              type: 'select',
              formatter:(val,value,label)=>{
                return `${label}(${value})`
              },
              props: {
                label: 'name',
                value: 'code'
              },
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
            }]
        },
      };
    }
}
</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

# 支持html转译

Tips

2.8.23+

配置html设置为true即可支持formatter转义html代码

<avue-crud :data="data" :option="option"></avue-crud><script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              html:true,
              formatter:(val)=>{
                return '<b style="color:red">'+val.name+'格式化内容</b>'
              }
            }, {
              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
Expand Copy

# 列隐藏

Tips

2.5.0+

一共是有4列的hide和showColumn可以达到控制列显隐控制

<avue-crud :option="option" :data="data" ></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2',
          text3:'内容1-3',
          text4:'内容1-4'
       },{
          text1:'内容2-1',
          text2:'内容2-2',
          text3:'内容2-3',
          text4:'内容2-4'
       }],
       option:{
          align:'center',
          headerAlign:'center',
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }, {
            label: '列内容3',
            prop: 'text3',
            hide:true
          }, {
            label: '列内容4',
            prop: 'text4',
            showColumn:false,
          }]
       }
    }
  }
}
</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
Expand Copy

# 改变结构配置

Tips

2.8.12+


<avue-crud ref="crud" :defaults.sync="defaults" :option="option"  :data="data">
  <template slot="menuLeft" slot-scope="{size}">
    <el-button type="primary" :size="size" @click="change">改变配置</el-button>
  </template>
</avue-crud>
<script>
export default {
  data(){
    return {
       type:false,
       defaults:{},
       data:[{
          text1:0
       }],
       option:{
          column: [{
            label: '内容1',
            prop: 'text1',
            type:'radio', 
            dicData:[{
              label:'显示',
              value:0
            },{
              label:'隐藏',
              value:1,
            }]
          },{
            label: '内容2',
            prop: 'text2',
            display:true
          },{
            label: '内容3',
            prop: 'text3'
          }]
       }
    }
  },
  methods:{
    change(){
        if(this.type){
          this.defaults.text2.hide=true
          this.defaults.text3.label='内容3'
        }else{
          this.defaults.text2.hide=false
          this.defaults.text3.label='有没有发现我变了'
        }
        this.type=!this.type
        this.$refs.crud.refreshTable()
    }
  }
}
</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
Expand Copy

# 持久化存储

Tips

2.9.0+

Tips

如果有远程字典类的配置或者加载错误情况，需要初始化下组件CRUD初始化

<avue-crud  ref="crud" :option="option" :data="data" :key="reload">
  <template slot="menuLeft" slot-scope="{size}">
    <el-button @click="saveOption" type="danger" :size="size">保存配置</el-button>
  </template>
</avue-crud>
<script>
const key='avue-option'
export default {
  data(){
    return {
       reload: Math.random(),
       data:[{
          text1:'内容1-1',
          text2:'内容2-1',
          text3: '110000'
       },{
          text1:'内容1-2',
          text2:'内容2-2',
          text3: '120000'
       },{
          text1:'内容1-3',
          text2:'内容2-3'
       },{
          text1:'内容1-4',
          text2:'内容2-4'
       },{
          text1:'内容1-5',
          text2:'内容2-5'
       }],
       option:{
          sortable:true,
          addBtn:false,
          menu:false,
          border:true,
          align:'center',
          column: [{
            label: '列内容1',
            prop: 'text1'
          }, {
            label: '列内容2',
            prop: 'text2'
          }, {
            label: '列内容3',
            prop: 'text3',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
          }]
       }
    }
  },
  mounted(){
   let option = localStorage.getItem(key)
    if (option) {
      this.option = JSON.parse(option)
      this.reload = Math.random()
    }
  },
  methods:{
    saveOption(){
      localStorage.setItem(key, JSON.stringify(this.option))
      this.$message.success('配置保存成功')
    }
  }
}
</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
Expand Copy

# 筛选

设置filters为true，字典用法和普通用法一致,filterMethod为自定义的筛选逻辑，filter-multiple筛选的数据为多选还是单选，默认为 true

<avue-crud :data="data" :option="option"></avue-crud>
<script>
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              formatter:function(row, value , label, column){
                  return row.name +'自定义'
              }
            }, {
              label:'性别',
              prop:'sex',
              filters:true,
              dicData:[{ label: '男', value: '男' }, { label: '女', value: '女' }],
              filterMethod:function(value, row, column) {
                return row.sex === 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
Expand Copy

# 默认排序

设置defaultSort一个属性接受prop排序的字段和order排序的方式俩个属性，初始化的时候根据设置默认排序,order中接受 ascending 表示升序，descending 表示降序，回调sort-change方法返回排序参数

<avue-crud :data="data" :option="option1" @sort-change="sortChange"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option1:{
          defaultSort:{
            prop: 'name',
            order: 'descending'
          },
          border:true,
          column:[
             {
              sortable:true,
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      };
    },
    methods: {
       sortChange(val){
        this.$message.success(JSON.stringify(val));
      }
    }
}
</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
Expand Copy

# 冻结列

Tips

2.0.4+

Tips

配置fixed为true即可实现冻结列

配置indexFixed,selectionFixed,expandFixed可以配置序号，多选，面板是否为冻结,当然你也可以配置他们的宽度indexWdth,selectionWidth,expandWidth。

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

<script>
export default {
    data() {
      return {
        data: [
          {
            id:1,
            name:'张三',
            sex:'男'
          }, {
            id:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          index:true,
          indexFixed:false,
          indexWidth:100,
          selection:true,
          selectionWidth:100,
          selectionFixed:false,
          expand:true,
          expandWidth:100,
          expandFixed:false,
          align:'center',
          menuFixed:false,
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              fixed:true,
              prop:'name'
            }, {
              width:500,
              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
35
36
37
38
39
40
41
42
43
44
45
46
47
Expand Copy

# 单元格和表头样式

Tips

配置className和labelClassName配置单元格和表头样式名称

配置indexClassName,selectionClassName,expandClassName可以配置序号，多选，面板列单元格的样式名称,配置indexLabelClassName,selectionLabelClassName,expandLabelClassName表头样式名称

<avue-crud :data="data" :option="option"></avue-crud>
<script>
export default {
  data () {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        index: true,
        indexClassName: 'indexClassName',
        indexLabelClassName: 'indexLabelClassName',
        selection: true,
        selectionClassName: 'selectionClassName',
        selectionLabelClassName: 'selectionLabelClassName',
        expand: true,
        expandClassName: 'expandClassName',
        expandLabelClassName: 'expandLabelClassName',
        column: [
          {
            label: '姓名',
            prop: 'name',
            className:'className',
            labelClassName:'labelClassName'
          }, {
            width: 500,
            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
35
36
37
38
39
40
41
42
43
Expand Copy

# 列拖拽排序

Tips

2.9.0+

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/Sortable/1.10.0-rc2/Sortable.min.js"></script>
1
2

columnSort设置为true即可开启拖拽功能，没有回调用方法直接修改option中的顺序

<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       },{
          text1:'内容3-1',
          text2:'内容3-2'
       }],
       option:{
          columnSort:true,
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  }
}
</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
Expand Copy

# 自定义列

设置列的属性slot为true时，在卡槽中用prop作为卡槽的名字即可

<avue-crud :data="data" :option="option" >
  <template slot="name" slot-scope="scope" >
    <el-tag>{{scope}}</el-tag>
  </template>
</avue-crud>

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

# render渲染

Tips

2.12.1+

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

<script>
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              render: (h,{ row }) => {
              return h('p',
                {
                  attrs: { id: 'box' },
                  class: { 'demo': true },
                  style: { color: 'pink', lineHeight: '30px' },
                }, row.name + 'Hello World Avue')
              }
            },
            {
              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
35
36
37
38
39
Expand Copy

# 列合并

Tips

如果数据不确定参考动态数据行和列合并

通过给传入spanMethod方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

<avue-crud
  :data="data"
  :option="option"
  :span-method="spanMethod"
></avue-crud>

<script>
  export default {
    data() {
      return {
        data: [
          {
            id: '12987122',
            name: '王小虎',
            amount1: '234',
            amount2: '3.2',
            amount3: 10
          },
          {
            id: '12987123',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12
          },
          {
            id: '12987124',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9
          },
          {
            id: '12987125',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17
          },
          {
            id: '12987126',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
        ],
        option: {
          border: true,
          menu:false,
          column: [
            {
              label: 'ID',
              prop: 'id'
            },
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '数值 1',
              prop: 'amount1'
            },
            {
              label: '数值 2',
              prop: 'amount2'
            },
            {
              label: '数值 3',
              prop: 'amount3'
            }
          ]
        }
      }
    },
    methods: {
      spanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
</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
Expand Copy
Last update: August 14, 2024 15:38
Contributors: smallwei

数据字典

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