tree 表格solt支持

components/page/dataGrid.vue

@@ -143,8 +143,10 @@
 </template>
 
 <script>
+import ColumnSlot from "./treeGrid/columnSolt";
 export default {
   name: "DataGrid",
+  components: { ColumnSlot },
   data() {
     return {
       keys: "",
@@ -155,7 +157,7 @@ export default {
         pageIndex: 1,
         pageSize: 20,
         sortBy: "id",
-        isDesc:true,
+        isDesc: true,
         conditions: [],
       },
       searchConditions: this.search,
@@ -294,15 +296,16 @@ export default {
       default: "",
     },
   },
+  provide() {
+    return {
+      tableRoot: this.slots,
+    };
+  },
   created() {
-    this.columns.forEach((u) => {
-      if (!u.hide) {
-        u.hide = false;
-      }
-    });
-    this.columnsCur = this.$u.clone(this.columns);
+   
   },
   mounted() {
+     this.initColumns();
     if (this.data && this.data.length > 0) {
       this.list = this.data;
       return;
@@ -350,7 +353,41 @@ export default {
     this.getRoutingHeaderData();
     this.getAllUser(); //获取所有用户
   },
+
   methods: {
+    //列初始化 slot 支持;
+    slots() {
+      return this.$scopedSlots;
+    },
+    initColumns() {
+      this.columns.forEach((u) => {
+        if (!u.hide) {
+          u.hide = false;
+        }
+      });
+     
+     var items=this.$u.clone(this.columns);
+     var soct=this.$scopedSlots;
+     console.warn("that.$scopedSlots()",soct["action"]());
+      items.forEach((u) => {
+        if (u.slot) {
+          u.render = (h, params) => {
+            return h(
+              "span",
+              // soct[u.slot]({
+              //   row: params.row,
+              //   column: params.column,
+              //   index: params.index,
+              // })
+              params.row.id
+            );
+          };
+          delete u.slot;
+        }
+      });
+       this.columnsCur = items;
+      console.log("cur", items,this.columnsCur);
+    },
     //数据加载
     load() {
       if (this.action) {

components/page/treeGrid/columnSolt.js

 export default {
     name: 'ColumnSlot',
     functional: true,
-    inject: ['slots'],
+    inject: ['tableRoot'],
     props: {
         row: Object,
         index: Number,
@@ -11,7 +11,7 @@ export default {
         }
     },
     render: (h, ctx) => {
-        return h('span', ctx.injections.slots()[ctx.props.column.slot]({
+        return h('span', ctx.injections.tableRoot()[ctx.props.column.slot]({
             row: ctx.props.row,
             column: ctx.props.column,
             index: ctx.props.index

components/page/treeGrid/index.vue

@@ -224,11 +224,15 @@ export default {
     drag:{
       type:Boolean,
       default:false
+    },
+    spaceWidth:{
+      type:Number,
+      default:20
     }
   },
   provide() {
     return {
-      slots: this.chachao,
+      tableRoot: this.slots,
     };
   },
   data() {
@@ -310,7 +314,7 @@ export default {
       })();
   },
   methods: {
-    chachao() {
+    slots() {
       return this.$scopedSlots;
     },
     //拖拽
@@ -450,11 +454,7 @@ export default {
     // 数据处理 增加自定义属性监听
     initData(items, level, parent) {
       // this.initItems = []
-      let spaceHtml = "";
-      for (let i = 1; i < level; i++) {
-        spaceHtml +=
-          "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='ms-tree-space'></i>";
-      }
+      let spaceHtml = "<i class='ms-tree-space' style='width:"+this.spaceWidth*level+"px'></i>";
       items.forEach((item, index) => {
         item = Object.assign({}, item, {
           parent,

pages/test/example/table/index.vue

@@ -21,6 +21,9 @@
           </FormItem>
         </Form>
       </template>
+      <template slot-scope="{row,column,index}" slot="action">
+            <strong>aaaa</strong>
+        </template>
     </DataGrid>
   </div>
 </template>
@@ -62,6 +65,7 @@ export default {
                     easy: true,
                       sortable:true,
                     high: true,
+                    slot:"cardNo",
                     tooltip: true,
                 },
                ],