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

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

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

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

子组件的代码

<template>
  <!-- 表格组件 -->
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    class="ant-table-striped mar_t10"
    size="small"
    :pagination="false"
    :scroll="tableHeight"
    :rowClassName="
      (record, index) => (index % 2 === 1 ? 'table-striped' : null)
    "
    :row-key="(record) => `${record[rowkey]}`"
    :row-selection="
      isSelect
        ? {
            selectedRowKeys: selectedRowKeys,
            onChange: onRowSel,
          }
        : null
    "
  >
    <template v-slot:[item]="scope" v-for="item in renderArr">
      <!-- // 插槽后面-slot:[item] 如果是动态渲染插槽需要使用这种方式
         //renderArr 是父组件传递过来的用了插槽的名字,等下会在父组件中讲清楚,通过这个数组来遍历生成插槽 -->
      <!-- //再通过这个插槽传递数据给父组件,做一些编辑提交的操作等等 -->
      <slot :name="item" :scope="scope" v-bind="scope || {}"></slot>
    </template>
  </a-table>
</template>

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

defineProps({
  dataSource: {
    type: Object,
    required: true,
  },
  columns: {
    type: Object,
    required: true,
  },
  isSelect: {
    type: Boolean,
    required: true,
  },

  rowkey: {
    type: String,
    required: true,
  },
});
// defineProps是3.2中新的语法,不需要从 vue里面引入出来

const slots = useSlots();
const emit = defineEmits(["onSelRowKeys"])
// 插槽的实例

const renderArr = Object.keys(slots);
const state = reactive({
  selectedRowKeys: [] as (string | number)[],
});
const onRowSel = (selectedRowKeys: (string | number)[], selectedRows) => {
  state.selectedRowKeys = selectedRowKeys;
  emit("onSelRowKeys", selectedRowKeys)
};
// 此处减去的190是其他固定元素块的总高度
const tableHeight = ref({ x: 4800, y: document.body.clientHeight - 190 });
onMounted(() => {
  // 监听浏览器窗口变化
  window.onresize = () => {
    return (() => {
      tableHeight.value.y = document.body.clientHeight - 190;
    })();
  };
});
// 渲染的数据

const { selectedRowKeys } = toRefs(state);
</script>
<style lang="less" scoped>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>


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

父组件的使用

//rowkey是唯一值随自己数据而修改
<template>
 <MyTable   :loading="loading"
        :columns="columns"
        :dataSource="viewList"
        :isSelect="isSelect"
        @onSelRowKeys="onSelRowKeys"
        rowkey="xxxxxxxxxxx">
        <template v-slot:bodyCell="{ scope }">
          <span v-if="scope.column.key === 'action'"  class="recent_linkcolor" @click="onDel(scope.record.fnid, 'nor')" >{{ $t("common.del") }}</span >
        </template>
      </MyTable>
</template>
<script setup>
 const isSelect=ref(false)
const state=reactive({
  rowKeys :[]
})
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: 'action',
    slots: { customRender: 'action' }
  }
]
const onSelRowKeys = (rowKeys: (string | number)[]) => {
  state.rowKeys = rowKeys;
};
const changePage=()=>{
    console.log('xxxx')
}
const onDel=()=>{
   console.log('xxxx')
}
const {rowKeys }=toRefs(state)
</script>

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 227,533评论 6 531
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,055评论 3 414
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 175,365评论 0 373
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,561评论 1 307
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,346评论 6 404
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,889评论 1 321
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,978评论 3 439
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,118评论 0 286
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,637评论 1 333
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,558评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,739评论 1 369
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,246评论 5 355
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,980评论 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,362评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,619评论 1 280
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,347评论 3 390
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,702评论 2 370

推荐阅读更多精彩内容