antdesignvue computed

Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，其中的 computed 属性用于计算属性。computed 属性可以根据数据的变化自动更新计算结果，从而实现数据的实时响应和动态渲染。

在 Ant Design Vue 中，computed 属性通常用于计算表格数据、过滤数据、排序数据等。通过 computed 属性，我们可以将数据的处理逻辑封装在组件内部，使代码更加清晰和易于维护。

下面是一个 Ant Design Vue 中使用 computed 属性的示例：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource"></a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { name: 'John', age: 18 },
        { name: 'Mary', age: 20 },
        { name: 'Tom', age: 22 },
      ],
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          sorter: (a, b) => a.name.localeCompare(b.name),
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          sorter: (a, b) => a.age - b.age,
        },
      ],
      searchName: '',
    }
  },

  computed: {
    filteredData() {
      return this.dataSource.filter(item => item.name.includes(this.searchName))
    },
  },
}
</script>

在上面的示例中，我们定义了一个 filteredData 的计算属性，它根据搜索框中的关键字过滤 dataSource 中的数据，并将过滤后的数据渲染到表格中。通过 computed 属性，我们可以轻松实现数据的动态计算和渲染。