文件夹改名
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]] Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0 Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33 Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83] Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6 Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
This commit is contained in:
liyang
44
src/views/demo/d2-crud/demo25/MyTag.vue
Normal file
44
src/views/demo/d2-crud/demo25/MyTag.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div style="cursor: pointer">
|
||||
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
require: true
|
||||
},
|
||||
scope: {
|
||||
default: null
|
||||
},
|
||||
myProps: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
type () {
|
||||
return this.value ? 'success' : 'danger'
|
||||
},
|
||||
text () {
|
||||
if (this.scope.$index === 1) {
|
||||
return this.myProps
|
||||
} else if (this.scope.$index === 3) {
|
||||
return '通过scope拿到了当前行日期：' + this.scope.row.date
|
||||
}
|
||||
return this.value ? '是' : '否'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.scope)
|
||||
console.log(this.myProps)
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
46
src/views/demo/d2-crud/demo25/codeComponent.js
Normal file
46
src/views/demo/d2-crud/demo25/codeComponent.js
Normal file
@@ -0,0 +1,46 @@
|
||||
export default `<template>
|
||||
<div style="cursor: pointer">
|
||||
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
require: true
|
||||
},
|
||||
// 本行的所有数据，此字段不需要额外配置
|
||||
scope: {
|
||||
default: null
|
||||
},
|
||||
// 通过 component 中 props 字段传过来的数据，此字段需要先在 component 中配置
|
||||
myProps: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
type () {
|
||||
return this.value ? 'success' : 'danger'
|
||||
},
|
||||
text () {
|
||||
if (this.scope.$index === 1) {
|
||||
return this.myProps
|
||||
} else if (this.scope.$index === 3) {
|
||||
return '通过scope拿到了当前行日期：' + this.scope.row.date
|
||||
}
|
||||
return this.value ? '是' : '否'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.scope)
|
||||
console.log(this.myProps)
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
75
src/views/demo/d2-crud/demo25/codeOverall.js
Normal file
75
src/views/demo/d2-crud/demo25/codeOverall.js
Normal file
@@ -0,0 +1,75 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@d2-data-change="handleDataChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: 'my-tag',
|
||||
props: {
|
||||
myProps: '我是通过props传过来的数据！'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
80
src/views/demo/d2-crud/demo25/codePart.js
Normal file
80
src/views/demo/d2-crud/demo25/codePart.js
Normal file
@@ -0,0 +1,80 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@d2-data-change="handleDataChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyTag from './MyTag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyTag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: MyTag,
|
||||
props: {
|
||||
myProps: '我是通过props传过来的数据！'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
1
src/views/demo/d2-crud/demo25/doc.md
Normal file
1
src/views/demo/d2-crud/demo25/doc.md
Normal file
@@ -0,0 +1 @@
|
||||
向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，可以在 `component` 中传入 `props` 字段，传入的字段可以在自定义组件中通过 `props` 接收，自定义组件还可以通过在 `props` 中定义 `scope` 字段来拿到当前行的所有数据，代码如下：
|
||||
108
src/views/demo/d2-crud/demo25/index.vue
Normal file
108
src/views/demo/d2-crud/demo25/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">表格自定义组件</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@d2-data-change="handleDataChange"/>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>全局注册写法：</h4>
|
||||
<d2-highlight :code="codeOverall"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>局部注册写法：</h4>
|
||||
<d2-highlight :code="codePart"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>自定义组件 MyTag 代码：</h4>
|
||||
<d2-highlight :code="codeComponent"/>
|
||||
</el-card>
|
||||
<template slot="footer">
|
||||
<d2-link-btn title="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './doc.md'
|
||||
import codeOverall from './codeOverall.js'
|
||||
import codePart from './codePart.js'
|
||||
import codeComponent from './codeComponent.js'
|
||||
import MyTag from './MyTag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyTag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
doc,
|
||||
codeOverall,
|
||||
codePart,
|
||||
codeComponent,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: MyTag,
|
||||
props: {
|
||||
myProps: '我是通过props传过来的数据！'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user