CreateModalView

基于视图渲染的表格弹框组件，可实现常用的选中行操作,这个组件可以单独使用，同时 create-from-view 组件内也内嵌了这个组件。 CreateModalView 组件内部之间使用的 CreateView 组件

基本用法

示例

vue

<template>
  <div>
    <CreateModalView
      v-model:modalVisible="jumpModalVisible"
      :jumpGroupId="jumpGroupId"
      :table-params="jumpTableConfigs"
      @do-check="handleModalCheck"
    ></CreateModalView>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// 引用组件
import { CreateModalView } from 'ctj-ui-next'

const jumpModalVisible = ref(false)
const jumpGroupId = ref('')
const jumpTableConfigs = reactive<TableParams>({
  tableConfigs: {
    viewConfig: {
      rowKey: 'invoice_number',
      checkType: 'checkbox',
    },
    request: {
      api: '/system/ledger/query/page',
    },
    cusPagination: {
      pageSize: 10,
      current: 1,
      total: 20,
    },
  },
})

const showJumpModal = (jump_group_id: string) => {
  jumpGroupId.value = jump_group_id
  jumpModalVisible.value = true
}

const handleModalCheck = (selectRows: Array<Record<string, any>>) => {
  console.log(selectRows)
}
</script>
<style lang="less" scoped></style>

<template>
  <div>
    <CreateModalView
      v-model:modalVisible="jumpModalVisible"
      :jumpGroupId="jumpGroupId"
      :table-params="jumpTableConfigs"
      @do-check="handleModalCheck"
    ></CreateModalView>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// 引用组件
import { CreateModalView } from 'ctj-ui-next'

const jumpModalVisible = ref(false)
const jumpGroupId = ref('')
const jumpTableConfigs = reactive<TableParams>({
  tableConfigs: {
    viewConfig: {
      rowKey: 'invoice_number',
      checkType: 'checkbox',
    },
    request: {
      api: '/system/ledger/query/page',
    },
    cusPagination: {
      pageSize: 10,
      current: 1,
      total: 20,
    },
  },
})

const showJumpModal = (jump_group_id: string) => {
  jumpGroupId.value = jump_group_id
  jumpModalVisible.value = true
}

const handleModalCheck = (selectRows: Array<Record<string, any>>) => {
  console.log(selectRows)
}
</script>
<style lang="less" scoped></style>

属性 Props

参数	说明	类型	可选值	默认值
modalVisible	显示隐藏弹框（必传）	boolean	-	false
modalWidth	弹框的宽度	string/number	-	'90%'
title	弹框 title	string	-	'请选择'
jumpGroupId	按钮跳转的视图 id（这个属性与 allUiViews 必传其中一个）	string	-	-
allUiViews	弹框视图数据（这个属性与 jumpGroupId 必传其中一个）	UiData	-	-
TableParams	crate-view 的参数(去除了 allUiViews)	Omit<CreateViewProps, 'allUiViews'>	-	-
cusHandleModal	是否自己处理隐藏操作，设true时需要自己在doCheck以及modalCancel隐藏弹框	boolean	-	false

事件 Events

事件名	说明	回调参数	参数说明
doCheck	弹框选择确认事件	selectRows	选中的行
modalCancel	弹框取消事件	-	-

插槽

插槽名称	说明
modalFooter	底部按钮

CreateModalView ​

基本用法 ​

属性 Props ​

事件 Events ​

插槽 ​

CreateModalView

基本用法

属性 Props

事件 Events

插槽