Vue3中computed的用法

最新推荐文章于 2025-05-24 22:18:51 发布

原创最新推荐文章于 2025-05-24 22:18:51 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

22 篇文章

订阅专栏

该文章展示了在Vue3中如何使用computed属性来处理数据。通过一个名为`CustomTable`的组件，作者创建了一个reactive的`data`对象，包含`checkList`和`columns`。computed属性`finallyColumns`被用来过滤`columns`，只保留`checkList`中包含的标签。这样实现了动态生成表格列的功能。

Vue3中computed的用法

前言
代码

前言

vue3中的computed的用法

代码

<script>
import { reactive, computed } 

export default {
  name: 'CustomTable',
  setup () {
    const data = reactive({
      checkList: ['标题'],
      columns: [
        {
          label: '标题',
          width: 'auto',
          prop: 'title',
          sortable: true,
          disableCheck: true
        }
      ],
      finallyColumns: []
    })

    data.finallyColumns = computed(() => {
      return data.columns.filter((item) =>
        data.checkList.includes(item.label)
      )
    })

    return {
      ...toRefs(data)
    }
  }
}
</script>