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: any) => any[]	-
valueFormatter	反向数据格式化函数（表格数据→模型数据）	(rows: any) => any	-
rules	表格数据验证规则	object	-
plus	是否显示添加行按钮	boolean	true
minus	是否显示删除行按钮	boolean	true
gridProps	传递给内部表格组件的属性	object	-
submitMethod	表单提交方法（返回true关闭对话框）	function	-

插槽

插槽名	说明	类型
valueCell	自定义单元格内容	-

备注

• 该组件继承所有 XPanel 组件的属性