(三)ant design vue对(a-table)内部封装进行分析(非分页)

1：#name="{ text }"是v-slot:name="{text}"的简写,name是插槽名称，text是子组件提供的数据(运用了插槽作用域传值)，{text:xxyy}还可以这样写,这样下面就要改成<a>{{ xxyy}}</a>了

注意:(#name="{text}"是子组件提供的当前行的当前列的数据，#name="{record}"是子组件提供的当前行的数据 )

<template #name="{ text }">

      <a>{{ text }}</a>

 </template>

 

2：title，customRender在<a-table>内部的分析：

title: 'customTitle'，当调用<a-table>的时候，<a-table>会根据title是否有值在name列的表头创建名字为customTitle的插槽,供父组件传递对应的该列的表头结构

customRender: 'name',当调用<a-table>的时候，<a-table>会根据customRender是否有值在name列的每一个td里面创建一个名字为name的插槽，并且根据插槽作用域

提供一个text(当前列的值)，record(当前行的对象)给父组件,父组件拿到后根据text或者record传入对应结构做渲染

 

slots{

title: 'customTitle',

customRender: 'name',

}

 

3：定义数据列，呢里的dataIndex必须和3里面的数据行的列名对应上,

 {

    dataIndex: 'name',

     width: 40,

    align: 'left',

    ellipsis: true ,

    slots: {

      title: 'customTitle',

      customRender: 'name',

    },

  },

4：返回的数据行

  {

    name: 'John Brown',

    age: 32,

    address: 'New York No. 1 Lake Park',

    tags: ['nice', 'developer'],

  },

4：以下是完整代码示例:

 

<template>

  <a-table :columns="columns" :data-source="data" :pagination="false">

    <template #name="{ text }">

      <a>{{ text }}</a>

    </template>

    <template #customTitle>

      <span>

        <smile-outlined />

        Name1

      </span>

    </template>

    <template #tagsy="{ text:xxyy}">

      <span>

        <a-tag

          v-for="tag in xxyy"

          :key="tag"

          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"

        >

          {{ tag.toUpperCase() }}

        </a-tag>

      </span>

    </template>

    <template #action="{ record }">

      <span>

        <a>Invite 一 {{ record.name }}</a>

        <a-divider type="vertical" />

        <a>Delete</a>

        <a-divider type="vertical" />

        <a class="ant-dropdown-link">

          More actions

          <down-outlined />

        </a>

      </span>

    </template>

  </a-table>

</template>

<script>

import { SmileOutlined,DownOutlined } from '@ant-design/icons-vue';

const columns = [

  {

    dataIndex: 'name',

     width: 40,

    align: 'left',

    ellipsis: true ,

    slots: {

      title: 'customTitle',

      customRender: 'name',

    },

  },

  {

    title: 'Age',

    dataIndex: 'age',

    width: 40,

    align: 'left',

    ellipsis: true ,

    slots: {customRender: 'age'}

  },

  {

    title: 'Address',

    dataIndex: 'address',

     width: 80,

    align: 'left',

    ellipsis: true ,

  },

  {

    title: 'tags',

    dataIndex: 'tags',

     width: 80,

    align: 'left',

    ellipsis: true ,

    slots: {

      customRender: 'tagsy',

    },

  },

  {

    title: 'Action',

    key: 'action',

    width: 80,

    align: 'left',

    ellipsis: true ,

    slots: {

      customRender: 'action',

    },

  },

];

const data = [

  {

    name: 'John Brown',

    age: 32,

    address: 'New York No. 1 Lake Park',

    tags: ['nice', 'developer'],

  },

  {

    name: 'Jim Green',

    age: 42,

    address: 'London No. 1 Lake Park',

    tags: ['loser'],

  },

  {

    name: 'Joe Black',

    age: 32,

    address: 'Sidney No. 1 Lake Park',

    tags: ['cool', 'teacher'],

  },

];

export default({

  name:"WW",

  setup() {

    return {

      data,

      columns,

    };

  },

  components: {

SmileOutlined,

DownOutlined

  },

});

</script>