19年8月4日

jiezi

5 年前

这周工作中遇到了一个多层表格筛选列本地化的东西。最后的解决方式是用 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)
});

一周技术总结和分享