NwFormFieldGrid 动态表格

适用于动态表格。

页面展示

示例代码

<template>
  <NwFormFieldGrid
    :columns="columns"
    v-model:value="arr"
  >
    <template #ruleName="{ row }">
      <t-input v-model:value="row.ruleName" />
    </template>
    <template #type="{ row }">
      <t-select v-model:value="row.type">
        <t-option :key="0" label="IP" :value="0" />
      </t-select>
    </template>
    <template #type-default="{ row }">
        <span>{{row.type == 0 ? 'IP' : ''}}</span>
    </template>
    <template #value="{ row }">
      <t-input v-model:value="row.value" />
    </template>
  </NwFormFieldGrid>
</template>

<script setup lang="ts">
  import { NwFormFieldGrid } from '@platform-lib/base'

  const arr = ref<Array<any>>([])
  const columns = ref<Array<any>>([
    {
      field: 'ruleName',
      title: '规则名称',
      editRender: { enabled: true },
      slots: { edit: 'ruleName' },
    },
    {
      field: 'type',
      title: '类型',
      editRender: { enabled: true },
      slots: { 
        edit: 'type',
        default: 'type-default'
      },
    },
    {
      field: 'value',
      title: '值',
      editRender: { enabled: true },
      slots: { edit: 'value' },
    },
  ])
</script>

NwFormFieldGrid props 属性

参数	说明	类型	默认值	必填
columns	列配置	Array	[]	-
value	值字段	Array	[]	-
disabled	是否禁用	Boolean	false	-
controlMode	按钮位置	string	internal	-

NwFormFieldGrid Events 事件

事件	说明	返回值
update:value	(d) => {}	Array

Last modified: 20 一月 2025