19年8月4日

一週技術總結和分享

這周工作中遇到了一個多層表格篩選列本地化的東西。最後的解決方式是用vux + core一起實現多層嵌套篩選項的本地化。

filterable-columns.js

const byGoodsCol = [
  {
    prop: 'all',
    label: '全選',
    children: [
      {
        prop: 'weidu1',
        label: '維度分類1',
        children: [
          {
            prop: 'a',
            label: 'a'
          },
          {
            prop: 'b',
            label: 'b'
          }
        ]
      },
      {
        prop: 'weidu2',
        label: '維度分類2',
        children: [
          {
            prop: 'c',
            label: 'c'
          },
          {
            prop: 'd',
            label: 'd'
          }
        ]
      }
    ]
  }
]
export function outCol(type) {
  return {
    byGoodsCol: byGoodsCol,
    byPlatfomrCol: byPlatfomrCol
  }[type]
}

config/local-settings.js

import { outCol } from './filterable-columns'

const byGoodsCol = outCol('byGoodsCol')

function initDefaultCol(data) {
  data.forEach(item => {
    if (item.children) {
      initDefaultCol(item.children)
    }
    item.checked = true
  })
  return data
}

export default {
  byGoodsCol: initDefaultCol(byGoodsCol)
}

core.js

import defaultSettings from '@/config/local-settings'
export default function Initializer() {
  store.commit('goods/goods_col', Vue.ls.get('BY_GOODS_COL', defaultSettings.byGoodsCol))
}

main.js

import initial from "./core/initial";
new Vue({
  el: "#app",
  router,
  store,
  created() {
    initial();
  },
  render: h => h(App)
});