在ant design vue中显示数组有什么好方法？

在ant design vue中显示数组有什么好方法？
下图中第一个格子显示的是后端穿过来的数组
想实现让这个数组在一个单元格内换行显示有什么好的方法？

img

img

用template ，自定义

用的是表格吗？如果是表格的话直接在表格的slot里循环这个数组就可以了

column template 自定义单元格

<div>
  <div v-for="value in list">{{value}}</div>
<div>
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7527839
  • 这篇博客你也可以参考下：ant design vue中日期选择框混合时间选择器的用法
  • 除此之外, 这篇博客: 【Ant design vue】antd实现动态增减表单项，支持赋初始值！中的 组件的使用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • API
    title：用于Form的字段绑定，如果多次使用了该组件，需要设置不同的值。
    wrapHeight：容器的高度，超过多少px则显示滚动条
    arr：数据源（如编辑场景从接口获取到的初始数据显示在表单项里）

    <template>
  <div class="padding: 20px;">
    <a-form :form="form">
      <a-divider>动态表单演示 -- author by Emily</a-divider>
      <dynamic-form
        :title="`${PARTONE}`"
        :wrapHeight="360"
        :arr="arr"
      />
    </a-form>
    <a-button style="margin-top: 25px;" type="primary" @click="handleSubmit">
      提交
    </a-button>
    <div style="margin-top: 15px;">{{ param.field }}</div>
  </div>
</template>

<script>
import DynamicForm from './DynamicForm'
const PARTONE = 'partOne'

export default {
  name: 'DynamicFormWrap',
  components: { DynamicForm },
  data () {
    return {
      form: this.$form.createForm(this),
      arr: [ // 模拟从接口获取到的数据（如编辑场景）
        { name: 'Tom', age: 20, gender: 'male' },
        { name: 'Emily', age: 22, gender: 'female' }
      ],
      PARTONE,
      param: {
        field: '' // 模拟接口接收的参数
      }
    }
  },
  methods: {
    // 提交
    handleSubmit () {
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          const partOneArr = [];
          (values[`${PARTONE}Name`]).forEach((item, index) => {
            const obj = {
              name: item,
              age: values[`${PARTONE}Age`][index],
              gender: values[`${PARTONE}Gender`][index]
            }
            partOneArr.push(obj)
          })
          this.param.field = JSON.stringify(partOneArr)
        }
      })
    }
  }
}
</script>
  • 您还可以看一下 陈槐老师的软件测试全栈系列课程课程中的 ant 介绍以及作用小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    Ant Design Vue中可以利用自定义样式来实现数组的每个元素在单元格内换行显示。

    首先，你可以在实际使用的单元格中添加一个类，比如"cell-wrapper"。这个类将用于包裹单元格内的内容，并设置合适的样式来实现换行。

    <a-table :columns="columns" :data-source="data">
  <template #yourColumnName="{ text }">
    <span class="cell-wrapper">
      {{ text }}
    </span>
  </template>
</a-table>

    接下来，在你的样式表中添加一个对应的样式规则来设置单元格的样式。例如，你可以使用flex布局来使每个元素在单元格内自动换行：

    .cell-wrapper {
  display: flex;
  flex-wrap: wrap;
}

    这样，每个元素都会在单元格内自动换行显示。

    希望这个解决方案能够帮助你实现需求。如果有任何问题，请随时向我提问。