挥别冗杂表格，Ant Design Vue Table带你玩转数据呈现

前端

2023-10-12 07:44:22

Ant Design Vue 的 Table 组件：轻松处理表格数据

在处理大量表格数据时，Ant Design Vue 的 Table 组件可以成为你的得力帮手。它提供了丰富的功能，让你轻松实现表格数据的增删改查，并自定义行样式和处理行数据，让数据呈现更加直观和可读。

行新增

要新增一行数据，你只需直接在数组中添加一个空数据项。后续数据可以从弹窗回调中获取，或者你也可以自定义新增数据的内容。

行删除

删除一行数据时，你可以根据对应的键值，过滤出 subData 中不需要的值即可。

自定义行样式

通过设置 className 属性，你可以为行设置自定义样式，让数据呈现更具个性化。

处理行数据

Table 组件提供了 handleChange 方法，让你可以轻松过滤出发生变化的行。通过这个方法，你可以修改数组中的对应参数值，实现对行数据的修改。

代码示例

import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    // 定义表格数据
    const subData = reactive([
      {
        id: 1,
        name: '商品1',
        quantity: 10,
        note: '这是一个商品1',
      },
      {
        id: 2,
        name: '商品2',
        quantity: 20,
        note: '这是一个商品2',
      },
    ]);

    // 定义表格列配置
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
      },
      {
        title: '数量',
        dataIndex: 'quantity',
      },
      {
        title: '备注',
        dataIndex: 'note',
      },
      {
        title: '操作',
        scopedSlots: { customRender: 'operation' },
      },
    ];

    // 定义弹窗状态、标题、数据和校验规则
    const visible = ref(false);
    const title = ref('');
    const modalData = reactive({});
    const modalRules = {
      name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
      quantity: [{ required: true, message: '请填写数量', trigger: 'blur' }],
    };

    // 定义弹窗确定和取消处理函数
    const handleOk = () => {
      this.$refs.modalBomForm.validate((valid) => {
        if (valid) {
          if (title.value === '新增') {
            subData.push(modalData);
          } else {
            const index = subData.findIndex((item) => item.id === modalData.id);
            subData[index] = modalData;
          }
          visible.value = false;
        }
      });
    };

    const handleCancel = () => {
      visible.value = false;
    };

    // 定义行数据变更处理函数
    const handleChange = (value) => {
      const index = subData.findIndex((item) => item.id === value.id);
      subData[index] = value;
    };

    return {
      subData,
      columns,
      visible,
      title,
      modalData,
      modalRules,
      handleOk,
      handleCancel,
      handleChange,
    };
  },
});