Skip to content

Commit

Permalink
feat: support customRender by jsx/h/slot
Browse files Browse the repository at this point in the history
  • Loading branch information
@lq782655835
lq782655835 committed May 6, 2020
1 parent c958f95 commit 7c42605
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 18 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
"format": "prettier --write './**/*.{js,ts,vue,json}'"
},
"dependencies": {
"@springleo/30-seconds-of-code": "^1.0.3",
"core-js": "^2.6.5",
"vue": "^2.6.10"
},
Expand Down
64 changes: 53 additions & 11 deletions src/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,62 @@
<el-table-plus
:data="list"
:columns="columns"
@row-click="rowClickHandle"
@sort-change="sortChangeHandle"
stripe
border>
<template #handle="text, row">
<el-button type="primary" @click="detailHandle(row)">查看详情</el-button>
<el-button type="danger" @lick="this.delHandle(row)">删除</el-button>
</template>
<template #handleTitle="column, index">
<el-input
size="mini"
placeholder="输入关键字搜索"/>
</template>
</el-table-plus>
<el-table
:data="list"
@row-click="rowClickHandle"
@sort-change="sortChangeHandle"
stripe
border
/>
>
<el-table-column
label='创建人' prop='member.userId'
sortable="custom" :sort-orders="['ascending', 'descending']"
/>
</el-table>
</div>
</template>

<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
name: "app",
data() {
return {
list: JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data,
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name', type: 'copy' },
{ label: '总容量', prop: 'storage', fn: val => `${val}G` },
{ label: '创建人', prop: 'member.userId', type: 'el-tag' },
{ label: '创建人', prop: 'member.userId', type: 'el-tag',
sortable: 'custom', 'sort-orders': ['ascending', 'descending'] },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' },
{ label: '操作', fixed: 'right', prop: 'handle', customRender: (h, val, row, column, index) => {
return (<div>
<el-button type="primary" onClick={() => this.detailHandle(row)}>查看详情</el-button>
<el-button type="danger" onClick={() => this.delHandle(row)}>删除</el-button>
</div>)
} }
{ label: '操作', fixed: 'right', prop: 'handle',
scopedSlots: { customRender: 'handle', customTitle: 'handleTitle' },
// customRender: (val, row, column, index, h) => h('el-button', '查看详情')
// customRender: (val, row, column, index) => {
// return (<div>
// <el-button type="primary" onClick={() => this.detailHandle(row)}>查看详情</el-button>
// <el-button type="danger" onClick={() => this.delHandle(row)}>删除</el-button>
// </div>)
// }
}
]
};
},
Expand All @@ -43,6 +72,19 @@ export default {
},
delHandle({ name }) {
this.$message.error(`删除 ${name}`);
},
rowClickHandle(row, column, event) {
console.log(row, column, event)
},
sortChangeHandle(o) {
console.log(o)
},
// formatter
formatter(row, column, cellValue, index) {
console.log(row, column, cellValue, index)
return 111
}
}
};
Expand Down
20 changes: 15 additions & 5 deletions src/components/el-table-plus.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@ export default {
},
render(h) {
const getDataValue = (column, row) => column.prop.split(".").reduce((obj, cur) => obj[cur], row);
const renderColumns = columns => columns.filter(i => !i.hidden).map((column) => {
const renderColumns = columns => columns.filter(i => !i.hidden).map(column => {
column = Object.assign({scopedSlots: {}, prop: ''}, column)
const scopedSlots = {
default: ({ row, $index}) => {
default: ({ row, column: elColumn, $index}) => {

// 支持链式. 如：xxx.xxx
const defaultValue = getDataValue(column, row)

Expand All @@ -30,19 +32,27 @@ export default {
}

// 自定义组件
column.customRender = column.customRender || this.$scopedSlots[column.scopedSlots.customRender]
if (column.customRender) {
return column.customRender(h, defaultValue, row, column, $index)
return column.customRender(defaultValue, row, elColumn, $index, h)
}
// 自定义文字
if (column.fn) {
return column.fn(defaultValue, row, column, $index)
return column.fn(defaultValue, row, elColumn, $index)
}
// 兼容element-ui formatter属性
if (column.formatter) {
return column.formatter(row, column, defaultValue, $index)
return column.formatter(row, elColumn, defaultValue, $index)
}

return defaultValue
},
header: ({column: elColumn, $index}) => {
column.customTitle = column.customTitle || this.$scopedSlots[column.scopedSlots.customTitle]
if (column.customTitle) {
return column.customTitle(elColumn, $index)
}
return column.label
}
}

Expand Down
18 changes: 17 additions & 1 deletion src/components/u-copy.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,23 @@
</template>

<script>
import { copyToClipboard } from "@springleo/30-seconds-of-code";
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
};
export default {
props: {
Expand Down

0 comments on commit 7c42605

Please sign in to comment.