Avue

操作栏配置

操作栏隐藏

暂无数据

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

<template>
  <avue-crud :data="data"
             :option="option1"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option1: {
        menu: false,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>
显示代码

操作栏对齐方式

暂无数据

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

<template>
  <avue-crud :data="data"
             :option="option1"></avue-crud>
</template>
<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>
显示代码

操作栏自适应

暂无数据

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

<template>
  <avue-crud :data="data"
             :option="option">
    <template #menu="{}">
      <el-button v-for="(item,index) in 5"
                 :key="index"
                 text
                 type="primary">操作{{index+1}}</el-button>
    </template>
  </avue-crud>
</template>
<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>
显示代码

操作栏样式

暂无数据

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

<template>
  <avue-crud :data="data"
             :option="option1"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option1: {
        menuClassName: 'menuClassName',
        menuLabelClassName: 'menuLabelClassName',
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>
显示代码

自定义操作栏头部

暂无数据

menu-header插槽为操作栏头部自定义

<template>
  <avue-crud :data="data"
             :option="option">
    <template #menu-header="{}">
      <el-tag @click="tip()">操作</el-tag>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        menuWidth: 380,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },
  methods: {
    tip () {
      this.$message.success('自定义头部按钮');
    }
  }
}
</script>
显示代码

自定义操作栏

暂无数据

menu为操作栏自定义

<template>
  <avue-crud :data="data"
             :option="option">
    <template #menu="{size,row,index}">
      <el-button @click="tip(row,index)"
                 icon="el-icon-check"
                 text
                 type="primary"
                 :size="size">自定义菜单按钮</el-button>
    </template>
  </avue-crud>
</template>
<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>
显示代码

查看按钮

TIP

自定义按钮

暂无数据

viewBtn配置为true即可

<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data"></avue-crud>
</template>
<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>
显示代码

复制按钮

暂无数据

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

<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          ids: 1,
          name: '张三',
          sex: '男'
        }, {
          ids: 2,
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        rowKey: 'ids',
        copyBtn: true,
        delBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>
显示代码

打印按钮

暂无数据

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

<template>
  <avue-crud :option="option"
             :data="data"></avue-crud>
</template>
<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>
显示代码

导出按钮

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

暂无数据

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

<template>
  <avue-crud :option="option"
             :data="data"></avue-crud>
</template>
<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>
显示代码

筛选按钮

TIP

常用自定筛选条件

暂无数据

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

<template>
  <avue-crud :option="option"
             :data="data"
             @filter="filterChange"></avue-crud>
</template>
<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>
显示代码

合并菜单

暂无数据

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

<template>
  <avue-crud :data="data"
             :option="option">
    <template #menu-btn="{row}">
      <el-dropdown-item divided
                        @click="tip(row)">自定义按钮</el-dropdown-item>
    </template>
    <template #menu="{row}">
      <el-button text
                 type="primary"
                 icon="el-icon-user"
                 @click="tip(row)">自定义按钮</el-button>
    </template>
  </avue-crud>
</template>

<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>
显示代码

图标菜单

暂无数据

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

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

<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>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档