边框

vue2

vue3

暂无数据

默认情况下，是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用

<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({
  border: true,
  align: 'center',
  menuAlign: 'center',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});
</script>

条纹

vue2

vue3

暂无数据

默认情况下，是不具有行彩色条纹的，如果需要，可以使用`stripe`属性，它接受一个`Boolean`，设置为`true`即可启用

<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({
  stripe: true,
  column: [
    {
      label: '姓名',
      prop: 'name'
    }, {
      label: '性别',
      prop: 'sex'
    }
  ]
})
</script>

行和单元格样式

vue2

vue3

暂无数据

对开开放了`cell-style`和`row-style`方法

<template>
  <tvue-crud :data="data"
             :option="option"
             :cell-style="cellStyle"
             :row-style="rowStyle"></tvue-crud>
</template>

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

const data = ref([
  { id: 1, name: '张三', money: 3000 },
  { id: 2, name: '李四', sex: false, money: 4000 },
  { id: 3, name: '王五', sex: false, money: 2000 }
]);

const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { label: '工资', prop: 'money' }
  ]
});

function rowStyle ({ row, column, rowIndex }) {
  if (rowIndex % 2 === 0) {
    return { backgroundColor: '#eee', color: '#fff' };
  }
  return {};
}

function cellStyle ({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 1) {
    if (row.money <= 3000) {
      return {
        color: 'green',
        fontWeight: 'bold',
        fontSize: '20px'
      };
    } else {
      return {
        color: 'red',
        fontWeight: 'bold',
        fontSize: '20px'
      };
    }
  }
  return {};
}
</script>

自定义行样式

.warning-row {
  background-color: #f56c6c !important;
  color: #fff;
}
.success-row {
  background-color: #67c23a !important;
  color: #fff;
}
.warning-row.hover-row td,
.success-row.hover-row td {
  background-color: initial !important;
}

vue2

vue3

暂无数据

可以通过指定 组件的 `row-class-name` 属性来为 crud 中的某一行添加 class，表明该行处于某种状态,返回当前行的`row`数据和行的序号`index`

<template>
  <tvue-crud :data="data"
             :option="option"
             :row-class-name="tableRowClassName"></tvue-crud>
</template>

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

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

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

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 0) {
    return 'warning-row';
  } else if (rowIndex === 1) {
    return 'success-row';
  }
  return '';
};
</script>

行多选

vue2

vue3

暂无数据

设`selection`属性为`true`即可；勾选的同时会回调`selectionChange`方法返回当前选中的数据,`toggleRowSelection`方法设置行勾选,`toggleAllSelection`方法设置全部勾选

<template>
  <tvue-crud ref="crud"
             :data="data"
             :option="option"
             @selection-change="selectionChange">
    <template #menu-left="{ size }">
      <el-button type="success"
                 icon="el-icon-check"
                 :size="size"
                 @click="toggleAllSelection">选中全部</el-button>
      <el-button type="success"
                 icon="el-icon-check"
                 :size="size"
                 @click="toggleRowSelection(data[0])">选中第一行</el-button>
      <el-button type="success"
                 icon="el-icon-check"
                 :size="size"
                 @click="toggleSelection([data[1]])">选中第二行</el-button>
      <el-button type="danger"
                 icon="el-icon-delete"
                 :size="size"
                 @click="toggleSelection()">取消选择</el-button>
    </template>
  </tvue-crud>
</template>

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

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

const option = ref({
  selection: true,
  align: 'center',
  menuAlign: 'center',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const toggleAllSelection = () => {
  crud.value.toggleAllSelection();
};

const toggleSelection = (data) => {
  crud.value.toggleSelection(data);
};

const toggleRowSelection = (row) => {
  crud.value.toggleRowSelection(row, true);
};

const selectionChange = (list) => {
  ElMessage.success('选中的数据: ' + JSON.stringify(list));
};
</script>

禁止某个项选择

vue2

vue3

暂无数据

`selectable`函数决定该行是否可以勾选

<template>
  <tvue-crud ref="crud"
             :data="data"
             :option="option"
             @selection-change="selectionChange" />
</template>

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

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

const option = ref({
  selection: true,
  selectable: (row, index) => index === 1,
  tip: false,
  align: 'center',
  menuAlign: 'center',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const selectionChange = (list) => {
  ElMessage.success('选中的数据', JSON.stringify(list));
};
</script>

翻页多选

vue2

vue3

暂无数据

设置`reserveSelection`为`true`保留之前的勾选

<template>
  <tvue-crud v-model:page="page"
             :data="data"
             :option="option"
             @selection-change="selectionChange"
             @on-load="onLoad" />
</template>

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

const page = ref({
  pageSize: 2,
  pageSizes: [2],
  total: 4,
});

const data = ref([]);

const option = ref({
  selection: true,
  reserveSelection: true,
  align: 'center',
  menuAlign: 'center',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' },
  ],
});

const onLoad = (page) => {
  if (page.currentPage === 1) {
    data.value = [
      { id: 1, name: '张三', sex: '男' },
      { id: 2, name: '李四', sex: '女' },
    ];
  } else if (page.currentPage === 2) {
    data.value = [
      { id: 3, name: '王五', sex: '女' },
      { id: 4, name: '赵六', sex: '女' },
    ];
  }
};

const selectionChange = (list) => {
  ElMessage.success('选中的数据' + JSON.stringify(list));
};
</script>

多选提示

vue2

vue3

暂无数据

设置`tip`为`false`可以取消表格上方显示的提示，同时支持对应的卡槽自定义

<template>

  <tvue-crud :data="data"
             :option="option">
    <template #tip>
      <el-tag type="danger">自定义内容</el-tag>
    </template>
  </tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([{
  id: 1,
  name: '张三',
  sex: '男'
}, {
  id: 2,
  name: '李四',
  sex: '女'
}])
const option = ref({
  selection: true,
  align: 'center',
  menuAlign: 'center',
  column: [
    {
      label: '姓名',
      prop: 'name'
    }, {
      label: '性别',
      prop: 'sex'
    }
  ]
})
</script>

行单选

vue2

vue3

暂无数据

单选一行数据时需要设置`highlightCurrentRow`属性为`true`,回调`current-row-change`方法,同时返回当前行的`row`数据

<template>
  <tvue-crud ref="crud"
             :data="data"
             :option="option"
             @current-row-change="handleCurrentRowChange"></tvue-crud>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(data[1])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElNotification } from 'element-plus';
const crud = ref(null);
const data = ref([
  {
    name: '张三',
    sex: '男'
  },
  {
    name: '李四',
    sex: '女'
  }
]);

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

const setCurrent = (row) => {
  crud.value.setCurrentRow(row);
};

const handleCurrentRowChange = (val) => {
  ElNotification({
    showClose: true,
    message: '单选' + JSON.stringify(val),
    type: 'success'
  });
};
</script>

行单选(利用卡槽)

vue2

vue3

暂无数据

这里利用了列自定义卡槽方式去实现行单选

<template>
  <tvue-crud ref="crud"
             :data="data"
             :option="option"
             @row-click="rowClick">
    <template #radio="{ row }">
      <el-radio v-model="selectRow"
                :label="row.$index">-</el-radio>
    </template>
  </tvue-crud>
</template>

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

const selectRow = ref('');
const data = ref([
  { id: 1, name: '张三', sex: '男' },
  { id: 2, name: '李四', sex: '女' }
]);
const option = ref({
  align: 'center',
  menuAlign: 'center',
  column: [
    { label: '', prop: 'radio', width: 60, hide: false },
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const rowClick = (row) => {
  selectRow.value = row.$index;
  ElMessage.success(`选择序号 ${row.$index}`);
};
</script>

展开行

vue2

vue3

暂无数据

使用`expand`属性时必须配置`rowKey`属性为你行数据的主键，不能重复, `defaultExpandAll`属性默认展开全部,`expandRowKeys`为展开指定`rowKey`主键的数组，同时你也可以调用`toggleRowExpansion`方法传入你要展开的`row`

<template>
  <tvue-crud ref="crud"
             :option="option"
             :data="data"
             @expand-change="expandChange">
    <template #expand="{ row }">
      {{ row }}
    </template>
  </tvue-crud>
</template>

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

const option = ref({
  expand: true,
  expandRowKeys: [1],
  rowKey: 'id',
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '年龄',
      prop: 'sex'
    }
  ]
});

const data = ref([
  {
    id: 1,
    name: '张三',
    sex: 12
  },
  {
    id: 2,
    name: '李四',
    sex: 20
  }
]);

const expandChange = (row, expendList) => {
  ElMessage.success('展开回调');
};
</script>

展开行(手风琴模式)

vue2

vue3

暂无数据

`expand-change`配置`expandRowKeys`去使用

<template>
  <tvue-crud ref="crud"
             :option="option1"
             :data="data"
             @expand-change="expandChanges">
    <template #expand="{ row }">
      {{ row }}
    </template>
  </tvue-crud>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'; // 根据实际使用的库导入消息组件

const data = ref([
  { id: 1, name: '张三', sex: 12 },
  { id: 2, name: '李四', sex: 20 }
]);

const option1 = ref({
  expand: true,
  expandRowKeys: [],
  rowKey: 'id',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '年龄', prop: 'sex' }
  ]
});

function expandChanges (row, expandList) {
  if (expandList.length) {
    option1.value.expandRowKeys = [];
    if (row) {
      option1.value.expandRowKeys.push(row.id);
    }
  } else {
    option1.value.expandRowKeys = [];
  }
  ElMessage.success('展开回调');
}
</script>

行单击方法

vue2

vue3

暂无数据

单击一行数据时回调`row-click`方法,同时返回当前行的`row`数据,`event`当前的操作对象,`column`当前列的属性

<template>
  <tvue-crud :data="data"
             :option="option"
             @row-click="handleRowClick"></tvue-crud>
</template>

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

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

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

const handleRowClick = (row, event, column) => {
  ElNotification({
    showClose: true,
    message: JSON.stringify(row),
    type: 'success',
  });
};
</script>

行双击方法

vue2

vue3

暂无数据

双击一行数据时回调`row-dblclick`方法,同时返回当前行的`row`数据,`event`当前的操作对象,`column`当前列的属性

<template>
  <tvue-crud :data="data"
             :option="option"
             @row-dblclick="handleRowDBLClick"></tvue-crud>
</template>

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

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

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


const handleRowDBLClick = (row, event) => {
  ElNotification({
    showClose: true,
    message: JSON.stringify(row),
    type: 'success',
  });
};
</script>

行拖拽排序

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/Sortable/1.10.0-rc2/Sortable.min.js"></script>

vue2

vue3

暂无数据

`rowSort`设置为`true`即可开启拖拽功能，`sortable-change`为拖拽后的回调方法,数据中需要包含`rowKey`主键，默认为`id`

<template>
  <tvue-crud :option="option"
             :data="data"
             @sortable-change="sortableChange"></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' },
  { text1: '内容3-1', text2: '内容3-2' },
  { text1: '内容4-1', text2: '内容4-2' },
  { text1: '内容5-1', text2: '内容5-2' }
]);

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

function sortableChange (oldIndex, newIndex) {
  ElMessage.success(`${oldIndex}, ${newIndex}`);
  console.log(oldIndex, newIndex);
}
</script>

行合并

提示

如果数据不确定参考动态数据行和列合并

vue2

vue3

暂无数据

通过给传入`spanMethod`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象

<template>
  <tvue-crud :data="data"
             :option="option"
             :span-method="spanMethod"></tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([
  {
    id: '12987122',
    name: '王小虎',
    amount1: '234',
    amount2: '3.2',
    amount3: 10
  },
  {
    id: '12987123',
    name: '王小虎',
    amount1: '165',
    amount2: '4.43',
    amount3: 12
  },
  {
    id: '12987124',
    name: '王小虎',
    amount1: '324',
    amount2: '1.9',
    amount3: 9
  },
  {
    id: '12987125',
    name: '王小虎',
    amount1: '621',
    amount2: '2.2',
    amount3: 17
  },
  {
    id: '12987126',
    name: '王小虎',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
])
const option = ref({
  border: true,
  menu: false,
  column: [
    {
      label: 'ID',
      prop: 'id'
    },
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '数值 1',
      prop: 'amount1'
    },
    {
      label: '数值 2',
      prop: 'amount2'
    },
    {
      label: '数值 3',
      prop: 'amount3'
    }
  ]
})
function spanMethod ({ row, column, rowIndex, columnIndex }) {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}
</script>