vxe-table可编辑表格实现增删改查与必填校验

最新推荐文章于 2024-08-09 07:00:48 发布

永远不会太晚

最新推荐文章于 2024-08-09 07:00:48 发布

阅读量2.7k

点赞数 6

文章标签： vue.js 前端 javascript vxe-table

本文链接：https://blog.csdn.net/qq_42611074/article/details/136617508

版权

本文介绍了Vxe-Table组件的行内编辑功能，包括高度自适应、拖拽调整、虚拟滚动、排序和编辑配置等内容，以及如何使用它进行数据操作和定制化渲染。

摘要由CSDN通过智能技术生成

vxe-table有行内编辑功能，基于该功能可以快速实现表格数据增删改查

在这里插入图片描述

demo

一些属性介绍：
height表格的高度；支持铺满父容器或者固定高度，如果设置auto为铺满父容器（如果设置为auto，则必须确保存在父节点且不允许存在相邻元素）
resizable 可以拖拽宽度
keep-source 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）
scroll-y 纵向虚拟滚动配置（不支持展开行）,gt指定大于指定行时自动启动纵向虚拟滚动
sort-config 排序配置项，一些数值和日期列可以进行排序
edit-config 编辑配置
edit-rules 编辑校验规则

<vxe-table
          ref="XTable"
          :data="tableData"
          height="auto"
          align="center"
          border
          resizable
          v-loading="tableLoading !== 0"
          stripe
          round
          row-id="id"
          keep-source
          :row-config="{ isCurrent: true, isHover: true }"
          :scroll-y="{ enabled: true, gt: 10 }"
          :show-overflow="true"
          :sort-config="{ trigger: 'cell' }"
          :edit-config="{
            trigger: 'click',
            mode: 'cell',
            showStatus: true,
          }"
          :edit-rules="validRules">
          <vxe-table-column
            type="checkbox"
            width="60"></vxe-table-column>
          <vxe-column
            type="seq"
            width="60"
            title="序号"></vxe-column>
          <vxe-column
            v-for="item in tableColumns"
            :key="item.field"
            :field="item.field"
            :title="item.title"
            :sortable="item.sortable"
            :min-width="item.width ? item.width : 120"
            :edit-render="item.render"></vxe-column>
        </vxe-table>

可编辑表格组件示例：下拉、纯数值输入框、输入框

 computed: {
    tableColumns() {
      return [
        {
          field: 'name',
          title: '名称',
          sortable: false,
          editrender: {
            // 下拉
            name: '$select',
            // 选项
            options: this.convertingStation,
            // 选项props
            optionProps: { value: 'name', label: 'name' },
            props: {
              // 可搜索
              filterable: true,
            },
          },
        },
        {
          field: 'max',
          title: '最大数值',
          sortable: false,
          // 数值输入框
          editrender: { name: '$input', props: { type: 'number' } },
        },
        {
          field: 'min',
          title: '最小',
          sortable: false,
          editrender: { name: '$input' },
        },
      ];
    },
    // 校验规则
    validRules() {
      const newobj = {};
      this.tableColumns.forEach((item) => {
        newobj[item.field] = [{ required: true, message: '必填项未填' }];
      });
      return newobj;
    },
  },

新增数据

insertAt(records, row)
往表格插入临时数据，从指定位置插入一行或多行；第二个参数：row 指定位置、null从第一行插入、-1 从最后插入
setEditCell(row, fieldOrColumn)
用于 edit-config，激活单元格编辑

 /** 新增数据 */
    async addData() {
      let { row } = await this.$refs['XTable'].insertAt();
      // 默认选中新增行的第一列进行编辑
      await this.$refs['XTable'].setEditCell(row, this.tableColumns[0].field);
    },