XDialogGrid 弹窗表格

示例

基础用法

<template>
  <div>
    <XAction label="open" @click="show"></XAction>
    <XDialogGrid
      v-model="visible"
      title="键值对"
      :formatter="formatter"
      :columns="columns"
      :model="model"
      :rules="rules"
      :submit-method="submitMethod"
      width="600px"
      height="500px">
      <template #valueCell>
        <span>valueCell</span>
      </template>
    </XDialogGrid>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { XDialogGrid, XAction, type GridColumns } from '@vtj/ui';

  const visible = ref(false);

  const columns: GridColumns = [
    {
      type: 'checkbox',
      title: '',
      width: 60
    },
    {
      type: 'seq',
      title: '序号',
      width: 60
    },
    {
      field: 'key',
      title: '键',
      editRender: {
        name: 'XInput'
      }
    },
    {
      field: 'value',
      title: '值',
      editRender: {
        name: 'XInput'
      },
      slots: {
        default: 'valueCell'
      }
    }
  ];

  const model = ref({
    key: 'value'
  });

  const rules = {
    key: [
      {
        required: true,
        message: '键名不能为空'
      }
    ]
  };

  const show = () => {
    visible.value = true;
  };

  const submitMethod = async (data: any) => {
    console.log('submitMethod', data);
    return true;
  };

  const formatter = (data: any) => {
    return Object.entries(data).map(([k, v]) => {
      return {
        key: k,
        value: v
      };
    });
  };
</script>

API

属性

属性名	说明	类型	默认值
columns	表格列配置	array	-
model	表格数据	any	-
formatter	model数据转换为表格数据	(model: any) => any[]	-
valueFormatter	表格数据转换为model数据	(rows: any) => any	-
rules	表格验证规则	-	-
plus	显示增行按钮	boolean	-
minus	显示删行按钮	boolean	-
gridProps	表格其他配置	-	-
submitMethod	表单提交方法， return true 关闭弹窗	function	-

接收 XPanel 所有参数

插槽

插槽名	说明	类型
valueCell	-	-