Avue

操作栏配置

... 2021-7-29 About 5 min

# 操作栏配置

# 操作栏隐藏

menu属性接受一个Boolean的属性达到隐藏操作栏的效果，默认为false

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

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

# 操作栏对齐方式

menuWidth属性设置操作栏宽度,menuTitle属性设置操作栏目的文字,menuAlign属性设置对齐方式,menuHeaderAlign属性设置表头对齐方式

<avue-crud :data="data" :option="option1"></avue-crud>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option1: {
        menuTitle: '其它',
        menuWidth: 250,
        menuAlign: 'left',
        menuHeaderAlign: 'left',
        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

# 操作栏自适应

通过js计算元素宽度，动态给menuWidth去赋值，实现动态宽度

<avue-crud :data="data"
            :option="option">
  <template #menu="{size}">
    <el-button v-for="(item,index) in 5"
                :key="index"
                :size="size"
                type="text">操作{{index+1}}</el-button>
  </template>
</avue-crud>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        menuWidth: 0,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },
  mounted () {
    this.setMenuWidth()
  },
  methods: {
    setMenuWidth () {
      setTimeout(() => {
        let width = 0;
        let list = document.querySelectorAll('.avue-crud__menu');
        list.forEach(ele => {
          let childList = ele.children
          let allWidth = 0;
          for (let i = 0; i < childList.length; i++) {
            const child = childList[i]
            allWidth += child.offsetWidth + 18
          }
          if (allWidth >= width) width = allWidth
        })
        this.option.menuWidth = width
      })
    }
  }
}
</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
Expand Copy

# 操作栏样式

menuClassName属性和menuLabelClassName属性配置操作栏列的单元格和表头样式名称

<avue-crud :data="data":option="option1"></avue-crud>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option1: {
        menuClassName: 'menuClassName',
        menuLabelClassName: 'menuLabelClassName',
        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
Expand Copy

# 自定义操作栏头部

menuHeader插槽为操作栏头部自定义

<avue-crud :data="data" :option="option">
  <template #menuHeader="{}">
      <el-tag @click="tip()">操作</el-tag>
    </template>
</avue-crud>

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

# 自定义操作栏

menu为操作栏自定义

<avue-crud :data="data" :option="option">
  <template slot-scope="{type,size,row,index}" slot="menu">
     <el-button icon="el-icon-check" :size="size" :type="type" @click="tip(row,index)">自定义菜单按钮</el-button>
  </template>
  <template slot-scope="{type,size,row,index}" slot="menuBefore">
      <el-button @click="tip(row,index)"
                 icon="el-icon-check"
                 :type="type"
                 :size="size">自定义前菜单</el-button>
    </template>
</avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          menuWidth:380,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      tip(row){
        this.$message.success('自定义按钮'+ JSON.stringify(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
44
45
46
Expand Copy

# 查看按钮

Tips

自定义按钮

viewBtn配置为true即可

<avue-crud ref="crud" :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[
         {
           name:'张三',
           age:12,
           address:'码云的地址'
         }, {
           name:'李四',
           age:13,
           address:'码云的地址'
         }
       ],
       option:{
          viewBtn:true,
          editBtn:false,
          delBtn:false,
          column: [{
            label: '姓名',
            prop: 'name'
          },{
            label: '年龄',
            prop: 'age'
          },{
            label:'地址',
            span:24,
            prop:'address',
            type:'textarea'
          }]
       }
    }
  }
}
</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

# 复制按钮

Tips

2.6.14+

{}

设置copyBtn为true时激活行复制功能,复制的数据会去除rowKey配置的主键


{{form}}
<avue-crud :data="data" :option="option" v-model="form"></avue-crud>

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

# 打印按钮

printBtn设置为true即可开启打印功能

<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'
       }],
       option:{
          menu:false,
          printBtn: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
Expand Copy

# 导出按钮

<!-- 导入需要的包 （一定要放到index.html中的head标签里）-->
<script src="https://cdn.staticfile.net/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://cdn.staticfile.net/xlsx/0.18.2/xlsx.full.min.js"></script>
1
2
3

excelBtn设置为true即可开启表格导出功能

<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'
       }],
       option:{
          menu:false,
          excelBtn: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
Expand Copy

# 筛选按钮

Tips

常用自定筛选条件

filterBtn默认为true，可以自定义过滤条件，根据filter函数回调

<avue-crud :option="option" :data="data" @filter="filterChange"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       }],
       option:{
          filterBtn:true,
          align:'center',
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  },
  methods:{
    filterChange(result) {
      this.$message.success('过滤器' + JSON.stringify(result))
    },
  }
}
</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

# 合并菜单

配置menuType为menu表格的操作栏目菜单合并，menuBtn卡槽为自定义卡槽,

<avue-crud :data="data" :option="option" >
<template slot-scope="{row}" slot="menuBtnBefore">
     <el-dropdown-item @click.native="tip(row)">自定义按钮</el-dropdown-item>
  </template>
  <template slot-scope="{row}" slot="menuBtn">
     <el-dropdown-item divided @click.native="tip(row)">自定义按钮</el-dropdown-item>
  </template>
</avue-crud>

<script>
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }, {
            name:'王五',
            sex:'女'
          }, {
            name:'赵六',
            sex:'男'
          }
        ],
        option:{
          menuType:'menu',
          menuBtnTitle:'自定义名称',
          column:[
             {
              label:'姓名',
              prop:'name'
            },
            {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    },
    methods: {
      tip(row){
        this.$message.success('自定义按钮'+ JSON.stringify(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
44
45
46
47
48
49
50
51
Expand Copy

# 图标菜单

配置menuType为icon时表格操作栏为图标按钮

<avue-crud :data="data" :option="option">
  <template slot-scope="{row}" slot="menu">
     <el-button size="small" @click="tip(row)" icon="el-icon-share"></el-button>
  </template>
</avue-crud>

<script>
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }, {
            name:'王五',
            sex:'女'
          }, {
            name:'赵六',
            sex:'男'
          }
        ],
        option:{
          menuType:'icon',
          column:[
             {
              label:'姓名',
              prop:'name'
            },
            {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    },
    methods: {
      tip(row){
        this.$message.success('自定义按钮'+ JSON.stringify(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
44
45
46
47
Expand Copy
Last update: August 14, 2024 15:38
Contributors: smallwei

增删改查方法

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