shuiwu/src/components/selectModel/index.vue

<template>
  <a-modal
    v-model:visible="modeVisible"
    class="custom-class"
    :title="title || '标题'"
    placement="right"
    :width="wdith || '1200px'"
    :closable="false"
    @close="closeFun"
    @ok="submit">
    <normalTable v-bind="$attrs" ref="list" size="small" @listData="listData">
      <template #tb_cell="{data}">
        <div v-if="custom">
          <slot name="custom" :data="data"></slot>
        </div>
        <div v-else>
          <template v-if="data.column.dataIndex === 'operation'">
            <slot name="handleBtn"></slot>
          </template>
          <template v-else>
            {{ data.record[data.column.dataIndex] }}
          </template>
        </div>
        
      </template>
    </normalTable>
  </a-modal>
  <slot name="slot1"></slot>
</template>
<script setup>
import normalTable from '@/template/normalTable/index.vue'
import {ref, defineProps, defineEmits,watch} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'

import {message} from 'ant-design-vue' 

let emit = defineEmits(['selectRowData','close'])
let props = defineProps({
  title:String,
  wdith:String,
  custom: {
    type:Boolean,
    default:() => false
  },
})
let list = ref()
let modeVisible = ref(false)

let submit = () => {
  if (!list.value.tableRecord.length) return message.warning('请选择数据')
  modeVisible.value = false
  emit('selectRowData',list.value.tableRecord)
}
watch(() => modeVisible.value,(val,preval) => {
  if (!val) list.value.reloadSelect()
})

let closeFun = () => {
  emit('close')
}

let refreshTable = () => {
  list.value.listData()
}

defineExpose({
  modeVisible,
  refreshTable,
  list
})
</script>

<style scoped>

</style>