Commit d22cb190dc6dced030ea6b3fab9654da258c621e
1 parent
ab434ceb
Exists in
master
and in
1 other branch
新式表格支持直接配置渲染项参数
Showing
2 changed files
with
26 additions
and
3 deletions
Show diff stats
examples/views/page/other.vue
| @@ -21,11 +21,11 @@ | @@ -21,11 +21,11 @@ | ||
| 21 | <template #value-location-district-province="{ value }"> | 21 | <template #value-location-district-province="{ value }"> |
| 22 | <el-tag type="success" size="mini">{{ value }}</el-tag> | 22 | <el-tag type="success" size="mini">{{ value }}</el-tag> |
| 23 | </template> | 23 | </template> |
| 24 | - <template #location-district-city> | 24 | + <!-- <template #location-district-city> |
| 25 | <el-table-column label="城市测试" prop="location-district-city"> | 25 | <el-table-column label="城市测试" prop="location-district-city"> |
| 26 | <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag> | 26 | <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag> |
| 27 | </el-table-column> | 27 | </el-table-column> |
| 28 | - </template> | 28 | + </template> --> |
| 29 | </eg-table> | 29 | </eg-table> |
| 30 | <!-- <p>这是一个非markdown页面</p> | 30 | <!-- <p>这是一个非markdown页面</p> |
| 31 | <pre>{{ model }}</pre> | 31 | <pre>{{ model }}</pre> |
| @@ -73,7 +73,16 @@ export default { | @@ -73,7 +73,16 @@ export default { | ||
| 73 | group: { key: 'district' }, | 73 | group: { key: 'district' }, |
| 74 | list: [ | 74 | list: [ |
| 75 | { type: 'el-input', label: '省', key: 'province', rules: [{ required: true, message: '请输入省' }] }, | 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 | { |
examples/views/page/table-new/index.vue
| @@ -21,6 +21,16 @@ | @@ -21,6 +21,16 @@ | ||
| 21 | :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index" | 21 | :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index" |
| 22 | ></slot> | 22 | ></slot> |
| 23 | </el-table-column> | 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 | <el-table-column v-else v-bind="item" :prop="item.agentKey || item.fullKey || item.key" | 34 | <el-table-column v-else v-bind="item" :prop="item.agentKey || item.fullKey || item.key" |
| 25 | :key="index" :min-width="item.minWidth || item['min-width']" | 35 | :key="index" :min-width="item.minWidth || item['min-width']" |
| 26 | ></el-table-column> | 36 | ></el-table-column> |
| @@ -124,6 +134,10 @@ export default { | @@ -124,6 +134,10 @@ export default { | ||
| 124 | } | 134 | } |
| 125 | return result; | 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 | </script> | 143 | </script> |
| 130 | \ No newline at end of file | 144 | \ No newline at end of file |