Naive 组件库数据表格和表单的问题

<n-modal v-model:show=“showPostModal” transform-origin=“center” :mask-closable=“false”

  style="width: 920px;height: 880px;">

  <n-card title="管理岗位类型" size="huge" closable :header-style="herderStyle" @close="closePostDialog">

    <n-form ref="formRef" inline :model="data"

      style="flex-direction: column;border-bottom: 1px solid #F3A21F;position: relative;">

      <n-data-table :columns="columns" :data="data" :bordered="false" style="--n-td-color-striped:#FBFBFB"

        :max-height="680" />

    </n-form>

    <span style="color: #F3A21F;font-size: 15px;cursor: pointer;" @click="addNewList">+新增选项</span>

    <template #action>

      <n-button style="margin-right: 15px;" @click="closePostDialog">取消</n-button>

      <n-button style="color: #fff;background-color: #F3A21F;">完成</n-button>

    </template>

  </n-card>

</n-modal>

const createColumns = (): DataTableColumns => [

{

title: '序号',

key: 'key',

render(_, index) {

  return h('span', {}, [index + 1])

}

},

{

title: '名称',

key: 'name',

width: 170,

render(row, index) {

  return h(

    NFormItem,

    {

      value: ref(row.name),

      path: 'name',

      rule: {

        required: true,

        trigger: ['input', 'blur'],

        validator(_, value) {

          console.log(value);

          // if (data.value[index].name == '' || data.value[index].name == undefined) {

          //   return new Error('请输入名称')

          // } else {

          //   return

          // }

        }

      },

    }, {

    default: () => [

      h(NInput, {

        class: 'inputStyle',

        value: row.name,

        onUpdateValue: (v) => {

          data.value[index].name = v

        },

        onInput: (v) => {

          data.value[index].name = v

        },

        disabled: row.newInfo === true ? false : true

      }),

    ]

  }

  );

}

},

{

title: '岗位类型',

key: 'postType',

width: 170,

render(row, index) {

  return h(

    NFormItem,

    {

      value: ref(row.postType),

      path: row.postType,

      rule: {

        required: true,

        trigger: ['blur', 'change'],

        validator() {

          if (data.value[index].postType == '' || data.value[index].postType == undefined) {

            return new Error('请选择岗位类型')

          } else {

            return

          }

        }

      }

    }, {

    default: () => [

      h(NSelect, {

        value: row.postType,

        option: postTypeOption,

        disabled: row.newInfo === true ? false : true

      })

    ]

  }

  )

}

},

{

title: '关联角色',

key: 'actor',

width: 170,

render(row, index) {

  return h(

    NFormItem,

    {

      value: ref(row.actor),

      path: row.actor,

      rule: {

        required: true,

        trigger: ['blur', 'change'],

        validator() {

          if (data.value[index].actor == '' || data.value[index].actor == undefined) {

            return new Error('请选择关联角色')

          } else {

            return

          }

        }

      }

    }, {

    default: () => [

      h(NSelect, {

        value: row.actor,

        option: actorOption,

        disabled: row.newInfo === true ? false : true

      })

    ]

  }

  )

}

},

{

title: '排序',

key: 'sort',

width: 170,

render(row, index) {

  return h(

    NFormItem,

    {

      value: ref(row.sort),

      path: row.sort,

      rule: {

        required: true,

        trigger: ['input', 'blur'],

        validator() {

          if (data.value[index].sort == '' || data.value[index].sort == undefined) {

            return new Error('请输入排序')

          } else {

            return

          }

        }

      },

    }, {

    default: () => [

      h(NInput, {

        class: 'inputStyle',

        value: row.sort,

        onUpdateValue: (v) => {

          data.value[index].sort = v

        },

        onBlur: () => {

          data.value[index].sort = row.sort

        },

        disabled: row.newInfo === true ? false : true

      }),

    ]

  }

  );

}

},

{

title: '操作',

key: 'operate',

width: 120,

render(row, index) {

  const button = h('span', {

    className: 'iconfont icon-lajitong',

    style: { color: '#e02d12', width: '16px', height: '16px', cursor: 'pointer' },

    onClick: () => {

      clickDel(index)

    }

  }, { default: () => '' })

  const newBUtton = h('span', {}, [

    h('span', {

      style: { fontSize: '14px', cursor: 'pointer', marginRight: '15px' },

      onClick: () => {

        cancelNew(index)

      }

    }, ['取消']),

    h('span', {

      style: { fontSize: '14px', cursor: 'pointer', marginRight: '15px', fontWeight: 'bold' },

      onClick: () => {

        saveNew(index)

      }

    }, ['保存'])

  ])

  return row.newInfo === false ? h('span', {}, [button]) : newBUtton

}

}

]
名称那一列里面有input框然后表单绑定不了input的值,自定义的规则里面的那个value一直是underfin