Version
2.0.0-rc.9
Environment
undefined
Reproduction link
Steps to reproduce
Add
Delete
<script>
const EditableCell = {
template: `
`,
props: {
text: String,
},
data() {
return {
value: this.text,
editable: false,
}
},
methods: {
handleChange(e) {
const value = e.target.value
this.value = value
},
check() {
this.editable = false
this.$emit('change', this.value)
},
edit() {
this.editable = true
},
},
}
export default {
components: {
EditableCell,
},
data() {
return {
visible: false,
dataSource: [
{
key: '0',
name: 'Edward King 0555',
age: '32',
address: 'London, Park Lane no. 0',
},
{
key: '1',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
},
],
count: 2,
columns: [
{
title: 'name',
dataIndex: 'name',
width: '30%',
scopedSlots: { customRender: 'name' },
},
{
title: 'age',
dataIndex: 'age',
},
{
title: 'address',
dataIndex: 'address',
},
{
title: 'operation',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
},
],
}
},
methods: {
onCellChange(key, dataIndex, value) {
const dataSource = [...this.dataSource]
const target = dataSource.find((item) => item.key === key)
if (target) {
target[dataIndex] = value
this.dataSource = dataSource
}
},
onDelete(key) {
const dataSource = [...this.dataSource]
this.dataSource = dataSource.filter((item) => item.key !== key)
},
handleAdd() {
const { count, dataSource } = this
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
address: `London, Park Lane no. ${count}`,
}
this.dataSource = [...dataSource, newData]
this.count = count 1
},
},
}
</script>
<style>
.editable-cell {
position: relative;
}
.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
padding-right: 24px;
}
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
position: absolute;
right: 0;
width: 20px;
cursor: pointer;
}
.editable-cell-icon {
line-height: 18px;
display: none;
}
.editable-cell-icon-check {
line-height: 28px;
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color: #108ee9;
}
.editable-add-btn {
margin-bottom: 8px;
}
</style>
What is expected?
name列的自定义组件编辑组件正常渲染
What is actually happening?
自定义组件没有渲染出来 而是
