1. 为CRUD.operation注入curd，免去属性传递 2. 表格界面零配置实现“表格列过滤显示”功能，弃用v-if方式 (#59)

⚡ CRUD优化
为CRUD.operation注入curd，免去属性传递
表格界面零配置实现“表格列过滤显示”功能，弃用v-if方式

src/components/Crud/CRUD.operation.vue

@@ -107,7 +107,7 @@ export default {
   props: {
     permission: {
       type: Object,
-      default: null
+      default: () => { return {} }
     }
   },
   data() {
@@ -136,19 +136,22 @@ export default {
         this.allColumnsSelected = true
         return
       }
-      for (const key in this.crud.props.tableColumns) {
-        this.crud.props.tableColumns[key].visible = val
-      }
+      this.crud.props.tableColumns.forEach(column => {
+        if (!column.visible) {
+          column.visible = true
+          this.updateColumnVisible(column)
+        }
+      })
       this.allColumnsSelected = val
       this.allColumnsSelectedIndeterminate = false
     },
     handleCheckedTableColumnsChange(item) {
       let totalCount = 0
       let selectedCount = 0
-      for (const key in this.crud.props.tableColumns) {
+      this.crud.props.tableColumns.forEach(column => {
         ++totalCount
-        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
-      }
+        selectedCount += column.visible ? 1 : 0
+      })
       if (selectedCount === 0) {
         this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
         this.$nextTick(function() {
@@ -158,6 +161,23 @@ export default {
       }
       this.allColumnsSelected = selectedCount === totalCount
       this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
+      this.updateColumnVisible(item)
+    },
+    updateColumnVisible(item) {
+      const table = this.crud.props.table
+      const vm = table.$children.find(e => e.prop === item.property)
+      const columnConfig = vm.columnConfig
+      if (item.visible) {
+        let columnIndex = -1
+        // 找出合适的插入点
+        table.store.states.columns.find(e => {
+          columnIndex++
+          return e.__index !== undefined && e.__index > columnConfig.__index
+        })
+        vm.owner.store.commit('insertColumn', columnConfig, columnIndex, null)
+      } else {
+        vm.owner.store.commit('removeColumn', columnConfig, null)
+      }
     },
     toggleSearch() {
       this.crud.props.searchToggle = !this.crud.props.searchToggle

src/components/Crud/RR.operation.vue

@@ -6,12 +6,10 @@
   </span>
 </template>
 <script>
+import { crud } from '@crud/crud'
 export default {
+  mixins: [crud()],
   props: {
-    crud: {
-      type: Object,
-      required: true
-    },
     itemClass: {
       type: String,
       required: false,

src/components/Crud/crud.js

@@ -551,13 +551,6 @@ function mergeOptions(src, opts) {
  * crud主页
  */
 function presenter(crud) {
-  function obColumns(columns) {
-    return {
-      visible(col) {
-        return !columns || !columns[col] ? true : columns[col].visible
-      }
-    }
-  }
   return {
     inject: ['crud'],
     beforeCreate() {
@@ -571,8 +564,7 @@ function presenter(crud) {
     },
     data() {
       return {
-        searchToggle: true,
-        columns: obColumns()
+        searchToggle: true
       }
     },
     methods: {
@@ -588,18 +580,21 @@ function presenter(crud) {
       this.crud.unregisterVM(this)
     },
     mounted() {
-      const columns = {}
-      this.$refs.table.columns.forEach(e => {
+      const columns = []
+      this.$refs.table.columns.forEach((e, index) => {
         if (!e.property || e.type !== 'default') {
           return
         }
-        columns[e.property] = {
+        e.__index = index
+        columns.push({
+          property: e.property,
+          index,
           label: e.label,
           visible: true
-        }
+        })
       })
-      this.columns = obColumns(columns)
       this.crud.updateProp('tableColumns', columns)
+      this.crud.updateProp('table', this.$refs.table)
     }
   }
 }