vue3.2二次封装antd vue 中的Table组件(基础封装)

主要是针对vue3.2中的<script setup>语法

这次这个项目使用的是一个 vue3.2+vite+antd vue

因为这个项目中多处使用到表格组件,所以进行了一个基础的封装,主要是通过antd vue 中表格的slots配置项,通过配合插槽来进行封装自定义表格;

子组件的代码

<template>
  <!-- 表格组件 -->
  <a-table
    :dataSource="dataSource" //通过父组件传递过来的表格数据
    :columns="columns"  // 表头配置通过这来渲染表格(重要)
    :pagination="false" // 是否需要分页,ant表格自带的,里选了fasle(不重要)
    :row-selection="isSelect ? rowSelection1 : null" //是否需要表格前面的选择按钮
  >
    <template v-slot:[item]="scope" v-for="item in renderArr">
       // 插槽后面-slot:[item] 如果是动态渲染插槽需要使用这种方式
       //renderArr 是父组件传递过来的用了插槽的名字,等下会在父组件中讲清楚,通过这个数组来遍历生成插槽
      <slot :name="item" :scope="scope"></slot> //再通过这个插槽传递数据给父组件,做一些编辑提交的操作等等
    </template>
  </a-table>
</template>

<script lang="ts" setup>
// 把setup放在 script 标签里面,相当于 setup()语法糖, 具体可以看vue的官网
import { useSlots } from 'vue' 
//如果要知道使用插槽的实例需要引入 useSlots

defineProps({
  dataSource: Object, 
  columns: Object,
  isSelect: Boolean
})
// defineProps是3.2中新的语法,不需要从 vue里面引入出来

const slots = useSlots()
// 插槽的实例


const renderArr = Object.keys(slots)
// 渲染的数据

const emits = defineEmits(['batch'])

// 是否多选
const rowSelection1 = {
  onChange: (selectedRowKeys: any, selectedRows: any) => {
    console.log(selectedRowKeys, selectedRows)
    emits('batch', selectedRowKeys)
  },
  getCheckboxProps: (record: any) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name
  })
}
</script>

里面最主要的就是通过useSlots来知道父组件在使用表格组件的时候使用了几个插槽,通过返回的这个对象来通过Object.Keys 来遍历渲染生成新的插槽.

父组件的使用

<template>
 <MyTable :columns="columns" :data-source="dataSource">
        <!-- 通过columns 里面对象来遍历生成 可编辑的组件, 不能编辑序号是因为是因为没有传过去slots , 所以及时columns里面包含序号,但是由于表格组件渲染插槽没有他,所以不会序号不可编辑,通过给操作自定义一个属性,来避免渲染生成操作-->
            
        <template v-slot:[item.dataIndex]="{ scope }" v-for="item in columns">
           // 通过v-for生成 因为每个选项都需要变成input框所以用遍历,但是操作一列有自己的方式
所以不需要,于是我就在操作一列自己加了一个isSlot,表示他不一样
          <div :key="item.dataIndex" v-if="!item.isSlot">
            <span v-if="!scope.record.isEdit">{{ scope.text }} </span>
            <a-input
              size="small"
              v-else
              v-model:value="scope.record[item.dataIndex]"
            ></a-input>
          </div>
            // 操作不需要上面的方式 这是操作自己的方式
          <div v-else>
            <a-button type="text" @click="alertDet(scope.record)"
              >详情</a-button
            >
            <a-button
              :type="scope.record.isEdit ? 'primary' : 'text'"
              @click="editPoint(scope.record)"
              >{{ scope.record.isEdit ? '完成' : '编辑' }}</a-button
            >
            <a-popconfirm
              placement="top"
              ok-text="确认"
              cancel-text="取消"
              @confirm="del_point(scope)"
            >
              <template #title>
                <p>确定删除该扫描节点?</p>
              </template>
              <a-button type="text">删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </MyTable>
</template>
<script setup>

const dataSource = ref([])
const columns = [
  {
    title: '序号',
    dataIndex: 'numbers',
    key: 'numbers',
    width: '6%'
  },
  {
    title: '资源名称',
    dataIndex: 'ResourceName',
    slots: { customRender: 'ResourceName' }, //slots这个是重点,通过这个相当于告诉表格组件我有一个具名插槽要用,名字就是customRender后面的名字, 父组件中的useSlots插槽的实例就有这个ResourceName,下面也一样
    width: '12%'
  },
  {
    title: '资源名称IP',
    dataIndex: 'IP',
    slots: { customRender: 'IP' },
    width: '12%'
  },
  {
    title: '数据库类型',
    dataIndex: 'DatabaseType',
    slots: { customRender: 'DatabaseType' },
    width: '12%'
  },
  {
    title: '数据库名',
    dataIndex: 'Dbname',
    slots: { customRender: 'Dbname' },
    width: '12%'
  },
  {
    title: '用户名',
    dataIndex: 'Username',
    slots: { customRender: 'Username' },
    width: '12%'
  },
  {
    title: '端口',
    dataIndex: 'Port',
    slots: { customRender: 'Port' },
    width: '12%'
  },
  {
    title: '操作',
    isSlot: true,
    dataIndex: 'operation',
    slots: { customRender: 'operation' }
  }
]
</script>

这次主要的一个功能是编辑之后变成input框 修改了之后变成完成发送请求重新渲染表格