美文网首页
vue中data和methods的公用提取

vue中data和methods的公用提取

作者: 前端小飞象 | 来源:发表于2020-07-21 14:24 被阅读0次

公用提取示例:util.js

//data
export function buildTableData(sortList, data) {
  return Object.assign({
    tableKey: 0,
    list: null,
    total: 0,
    listLoading: false,
    page: {
      pageNum: 1,
      pageSize: 20,
      sortArray: sortList.map(item => {
        return { field: item[0], order: item[1] }
      }),
      sort: sortList.map(item => {
        // console.log(`${item[0]} ${item[1]}`)
        return `${item[0]} ${item[1]}`
      })
    }
  }, data)
}
//methods
export function buildTableMethod(fetchList, otherMethods) {
  return Object.assign({
    async getList() {
      this.listLoading = true
      const response = await fetchList(this.page, this.params)
      this.list = response.data.list
      this.total = response.data.total
      this.listLoading = false
    },
    handleFilter,
    sortChange,
    getSortClass
  }, otherMethods)
}

使用示例:

import { buildTableMethod, buildTableData} from './util'
data(){
  return buildTableData([],{
    //自己的参数
  })
},
methods: buildTableMethod(taskFind, {
   //自己的方法
})

相关文章

网友评论

      本文标题:vue中data和methods的公用提取

      本文链接:https://www.haomeiwen.com/subject/beyikktx.html