操作栏配置

操作栏隐藏

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  menu: false,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});
</script>

操作栏对齐方式

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option1 = ref({
  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 setup>
import { ref, onMounted } from 'vue';

// 数据和选项
const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  menuWidth: 0,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

// 设置菜单宽度
const setMenuWidth = () => {
  setTimeout(() => {
    let width = 0;
    const list = document.querySelectorAll('.avue-crud__menu');
    list.forEach(ele => {
      const 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;
    });
    option.value.menuWidth = width;
  });
};

// 在组件挂载后执行
onMounted(() => {
  setMenuWidth();
});
</script>

操作栏样式

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  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 setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  menuWidth: 380,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const tip = () => {
  ElMessage.success('自定义头部按钮');
};
</script>

自定义操作栏

效果预览可直接操作下方示例

menu为操作栏自定义,menu-before为按钮前置卡槽

正在加载示例…

<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>
    <template #menu-before="{ size, row, index }">
      <el-tag type="primary"
              :size="size">提示</el-tag>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  menuWidth: 380,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const tip = (row, index) => {
  ElMessage.success('自定义按钮' + JSON.stringify(row));
};
</script>

查看按钮

提示

自定义按钮

效果预览可直接操作下方示例

viewBtn配置为true即可

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', age: 12, address: '码云的地址' },
  { name: '李四', age: 13, address: '码云的地址' }
]);

const option = ref({
  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 setup>
import { ref } from 'vue';

const data = ref([
  { ids: 1, name: '张三', sex: '男' },
  { ids: 2, name: '李四', sex: '女' }
]);

const option = ref({
  rowKey: 'ids',
  copyBtn: true,
  delBtn: false,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});
</script>

打印按钮

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const data = ref([
  { text1: '内容1-1', text2: '内容1-2' },
  { text1: '内容2-1', text2: '内容2-2' }
]);

const option = ref({
  menu: false,
  printBtn: true,
  column: [
    { label: '列内容1', prop: 'text1' },
    { label: '列内容2', prop: 'text2' }
  ]
});
</script>

导出按钮

<!-- 导入需要的包 （一定要放到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>

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';
const data = ref([
  { text1: '内容1-1', text2: '内容1-2' },
  { text1: '内容2-1', text2: '内容2-2' }
]);

const option = ref({
  menu: false,
  excelBtn: true,
  column: [
    { label: '列内容1', prop: 'text1' },
    { label: '列内容2', prop: 'text2' }
  ]
});
</script>

筛选按钮

提示

常用自定筛选条件

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-crud :option="option"
             :data="data"
             @filter="filterChange"></avue-crud>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  { text1: '内容1-1', text2: '内容1-2' },
  { text1: '内容2-1', text2: '内容2-2' }
]);

const option = ref({
  filterBtn: true,
  align: 'center',
  column: [
    { label: '列内容1', prop: 'text1' },
    { label: '列内容2', prop: 'text2' }
  ]
});

const filterChange = (result) => {
  ElMessage.success('过滤器' + JSON.stringify(result));
};
</script>

合并菜单

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-crud :data="data"
             :option="option">
    <template #menu-btn-before="{ row }">
      <el-tag type="primary"
              :size="size">提示</el-tag>
    </template>
    <template #menu-btn="{ row }">
      <el-dropdown-item divided
                        @click="tip(row)">自定义后按钮</el-dropdown-item>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' },
  { name: '王五', sex: '女' },
  { name: '赵六', sex: '男' }
]);

const option = ref({
  menuType: 'menu',
  menuBtnTitle: '自定义名称',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const size = ref('medium'); // 设置标签大小

const tip = (row) => {
  ElMessage.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 setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' },
  { name: '王五', sex: '女' },
  { name: '赵六', sex: '男' }
]);

const option = ref({
  menuType: 'icon',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const tip = (row) => {
  ElMessage.success('自定义按钮' + JSON.stringify(row));
};
</script>