操作栏隐藏

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-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>

操作栏对齐方式

vue2

vue3

暂无数据

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

<template>
  <tvue-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>

操作栏自适应

vue2

vue3

暂无数据

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

<template>
  <tvue-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>
  </tvue-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('.tvue-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>

操作栏样式

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-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>

自定义操作栏头部

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :data="data"
             :option="option">
    <template #menu-header>
      <el-tag @click="tip">操作</el-tag>
    </template>
  </tvue-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>

自定义操作栏

vue2

vue3

暂无数据

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

<template>
  <tvue-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>
  </tvue-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>

查看按钮

提示

自定义按钮

vue2

vue3

暂无数据

`viewBtn`配置为`true`即可

<template>
  <tvue-crud ref="crud"
             :option="option"
             :data="data"></tvue-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>

复制按钮

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-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>

打印按钮

vue2

vue3

暂无数据

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

<template>
  <tvue-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>

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :option="option"
             :data="data"></tvue-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>

筛选按钮

提示

常用自定筛选条件

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :option="option"
             :data="data"
             @filter="filterChange"></tvue-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>

合并菜单

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :option="option"
             :data="data"
             @filter="filterChange"></tvue-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>

图标菜单

vue2

vue3

暂无数据

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

<template>
  <tvue-crud :data="data"
             :option="option">
    <template #menu="{ row }">
      <el-button @click="tip(row)"
                 icon="el-icon-share"></el-button>
    </template>
  </tvue-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>