新式表格支持直接配置渲染项参数

Aaron
1 parent ab434ceb
Showing 2 changed files with 26 additions and 3 deletions Show diff stats
examples/views/page/other.vue
examples/views/page/table-new/index.vue
@@ -21,11 +21,11 @@
       <template #value-location-district-province="{ value }">
         <el-tag type="success" size="mini">{{ value }}</el-tag>
       </template>
-      <template #location-district-city>
+      <!-- <template #location-district-city>
         <el-table-column label="城市测试" prop="location-district-city">
           <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag>
         </el-table-column>
-      </template>
+      </template> -->
     </eg-table>
     <!-- <p>这是一个非markdown页面</p>
     <pre>{{ model }}</pre>
@@ -73,7 +73,16 @@ export default {
                 group: { key: 'district' },
                 list: [
                   { type: 'el-input', label: '省', key: 'province', rules: [{ required: true, message: '请输入省' }] },
-                  { type: 'el-input', label: '市', key: 'city' },
+                  // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } },
+                  { type: 'el-input', label: '市', key: 'city',
+                    render: {
+                      type: 'span', props: { href: 'https:///www.baidu.com/' }, style: { color: 'red' },
+                      children({ row }) {
+                        const { location: { district: { city } = {} } = {} } = row;
+                        return city ? `${city}[城市]` : '';
+                      }
+                    }
+                  },
                 ],
               },
               {
@@ -21,6 +21,16 @@
                 :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
               ></slot>
             </el-table-column>
+            <el-table-column v-else-if="item.render" v-bind="item" :prop="item.agentKey || item.fullKey || item.key"
+              :key="index" :min-width="item.minWidth || item['min-width']"
+            >
+              <template slot-scope="slotScope">
+                <component :is="item.render.type" v-bind="item.render.props" :style="item.render.style">
+                  <template v-if="item.render.children">{{ bindItemRenderChildren(item, slotScope) }}</template>
+                  <template v-else>{{ $_get(row, item.fullKey) }}</template>
+                </component>
+              </template>
+            </el-table-column>
             <el-table-column v-else v-bind="item" :prop="item.agentKey || item.fullKey || item.key"
               :key="index" :min-width="item.minWidth || item['min-width']"
             ></el-table-column>
@@ -124,6 +134,10 @@ export default {
       }
       return result;
     },
+    // 处理表格项渲染时的子值
+    bindItemRenderChildren(item, scope) {
+      return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
+    }
   }
 };
 </script>
 \ No newline at end of file
...	...	@@ -21,11 +21,11 @@
21	21	<template #value-location-district-province="{ value }">
22	22	<el-tag type="success" size="mini">{{ value }}</el-tag>
23	23	</template>
24		- <template #location-district-city>
	24	+ <!-- <template #location-district-city>
25	25	<el-table-column label="城市测试" prop="location-district-city">
26	26	<el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag>
27	27	</el-table-column>
28		- </template>
	28	+ </template> -->
29	29	</eg-table>
30	30	<!-- <p>这是一个非markdown页面</p>
31	31	<pre>{{ model }}</pre>
...	...	@@ -73,7 +73,16 @@ export default {
73	73	group: { key: 'district' },
74	74	list: [
75	75	{ type: 'el-input', label: '省', key: 'province', rules: [{ required: true, message: '请输入省' }] },
76		- { type: 'el-input', label: '市', key: 'city' },
	76	+ // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } },
	77	+ { type: 'el-input', label: '市', key: 'city',
	78	+ render: {
	79	+ type: 'span', props: { href: 'https:///www.baidu.com/' }, style: { color: 'red' },
	80	+ children({ row }) {
	81	+ const { location: { district: { city } = {} } = {} } = row;
	82	+ return city ? `${city}[城市]` : '';
	83	+ }
	84	+ }
	85	+ },
77	86	],
78	87	},
79	88	{
...	...
...	...	@@ -21,6 +21,16 @@
21	21	:row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
22	22	></slot>
23	23	</el-table-column>
	24	+ <el-table-column v-else-if="item.render" v-bind="item" :prop="item.agentKey \|\| item.fullKey \|\| item.key"
	25	+ :key="index" :min-width="item.minWidth \|\| item['min-width']"
	26	+ >
	27	+ <template slot-scope="slotScope">
	28	+ <component :is="item.render.type" v-bind="item.render.props" :style="item.render.style">
	29	+ <template v-if="item.render.children">{{ bindItemRenderChildren(item, slotScope) }}</template>
	30	+ <template v-else>{{ $_get(row, item.fullKey) }}</template>
	31	+ </component>
	32	+ </template>
	33	+ </el-table-column>
24	34	<el-table-column v-else v-bind="item" :prop="item.agentKey \|\| item.fullKey \|\| item.key"
25	35	:key="index" :min-width="item.minWidth \|\| item['min-width']"
26	36	></el-table-column>
...	...	@@ -124,6 +134,10 @@ export default {
124	134	}
125	135	return result;
126	136	},
	137	+ // 处理表格项渲染时的子值
	138	+ bindItemRenderChildren(item, scope) {
	139	+ return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
	140	+ }
127	141	}
128	142	};
129	143	</script>
130	144	\ No newline at end of file
...	...