v-for和slot-scope渲染出错

最新推荐文章于 2024-10-07 17:08:53 发布

王等等csdn

最新推荐文章于 2024-10-07 17:08:53 发布

阅读量1.8k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_38475901/article/details/103635368

版权

在使用ant design vue的table组件时遇到一个问题，当v-for循环中的变量名与slot-scope相同导致渲染错误。通过将v-for循环的变量名改为不同名称，问题得到解决。此问题可能涉及到v-for与slot-scope的交互，寻求对此有理解的开发者分享原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做项目的时候，遇见了一个奇怪的现象，先写一下所使用的东西
vue 项目，使用ant design vue 中的table组件

之前的代码

<template>
  <a-table :columns="columns" :dataSource="data" bordered>
 	  <template
         v-for="field in ['name', 'address']"
         :slot="field"
         slot-scope="text"
       >
         <a>{{ text }}</a>
      </template>
       <template
         v-for="field in ['phone', 'age']"
         :slot="field"
         slot-scope="text"
       >
         <span style="color: blue">{{ text }}</span>
      </template>
      <span slot="tags" slot-scope="tags">
	      <a-tag
	        v-for="tag in tags"
	        :color="tag==='loser' ? 'volcano' : (tag.length > 5 ? 'geekblue' : 'green')"
	        :key="tag"
	      >
	        {{tag.toUpperCase()}}
	      </a-tag>
	  </span>
      <span slot="action" slot-scope="text, record">
	      <a href="javascript:;">Invite 一 {{record.name}}</a>
	      <a-divider type="vertical" />
	      <a href="javascript:;">Delete</a>
	      <a-divider type="vertical" />
	      <a href="javascript:;" class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
	  </span>
  </a-table>
</template>
<script>
  const columns = [
    {
      title: 'Name'
      dataIndex: 'name',
      scopedSlots: { customRender: 'name' }
    },
    {
      title: 'Age',
      dataIndex: 'age',
      scopedSlots: { customRender: 'age' }
    },
    {
      title: 'Address',
      dataIndex: 'address',
      scopedSlots: { customRender: 'age' }
    },
    {
      title: 'Tags',
      dataIndex: 'tags',
      scopedSlots: { customRender: 'tags' },
    },
    {
      title: 'Action',
      key: 'action',
      scopedSlots: { customRender: 'action' },
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      phone: 13333333333,
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      phone: 13333333333,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      phone: 13333333333,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  export default {
    data() {
      return {
        data,
        columns,
      };
    },
  };
</script>

好像是 v-for=“field” 中的field使用了相同的，修改成不一样的就能正常渲染了
改过之后的代码

<template
         v-for="field in ['name', 'address']"
         :slot="field"
         slot-scope="text"
       >
         <a>{{ text }}</a>
      </template>
       <template
         v-for="col in ['phone', 'age']"
         :slot="col"
         slot-scope="text"
       >
         <span style="color: blue">{{ text }}</span>
      </template>

不知是v-for的原因还是slot的原因，如果有知道的小伙伴，可以评论出来