# 操作栏配置
# 操作栏隐藏
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>
显示代码复制代码复制代码