drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Table add content prop to compile custom component

Browse source 
Table add content prop to compile custom component
This commit is contained in:
梁灏 2016-12-01 11:02:06 +08:00
parent 224a3ae539
commit d0e206c501
4 changed files with 57 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/table/cell.vue
View file

@ -27,7 +27,8 @@
data () {
return {
renderType: '',
uid: -1
uid: -1,
content: this.$parent.$parent.content
}
},
computed: {
@ -43,7 +44,7 @@
methods: {
compile () {
if (this.column.render) {
const $parent = this.$parent.$parent.$parent;
const $parent = this.content;
const template = this.column.render(this.row, this.column, this.index);
const cell = document.createElement('div');
cell.innerHTML = template;
@ -59,7 +60,7 @@
}
},
destroy () {
const $parent = this.$parent.$parent.$parent;
const $parent = this.content;
for (let i = 0; i < $parent.$children.length; i++) {
if ($parent.$children[i]._uid === this.uid) {
$parent.$children[i].$destroy();

2
src/components/table/table-head.vue
View file

@ -34,7 +34,7 @@
</div>
</div>
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
<ul>
<ul :class="[prefixCls + '-filter-list-single']">
<li
:class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]"
@click="handleReset($index)">全部</li>

34
src/components/table/table.vue
View file

@ -122,6 +122,9 @@
default () {
return '';
}
},
content: {
type: Object
}
},
data () {
@ -243,23 +246,25 @@
let autoWidthIndex = -1;
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
const column = this.cloneColumns[i];
if (this.data.length) {
const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
const column = this.cloneColumns[i];
let width = parseInt(getStyle($td[i], 'width'));
if (i === autoWidthIndex) {
width = parseInt(getStyle($td[i], 'width')) - 1;
}
if (column.width) width = column.width;
this.cloneColumns[i]._width = width;
columnsWidth[column._index] = {
width: width
let width = parseInt(getStyle($td[i], 'width'));
if (i === autoWidthIndex) {
width = parseInt(getStyle($td[i], 'width')) - 1;
}
if (column.width) width = column.width;
this.cloneColumns[i]._width = width;
columnsWidth[column._index] = {
width: width
}
}
this.columnsWidth = columnsWidth;
}
this.columnsWidth = columnsWidth;
});
});
},
@ -502,6 +507,7 @@
}
},
compiled () {
if (!this.content) this.content = this.$parent;
this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
this.rebuildData = this.makeDataWithSortAndFilter();

48
test/routers/table.vue
View file

@ -1,27 +1,38 @@
<template>
<i-table border :columns="columns1" :data="data1"></i-table>
<Card>
<i-table :content="self" border :columns="columns7" :data="data6"></i-table>
</Card>
</template>
<script>
export default {
data () {
return {
columns1: [
self: this,
columns7: [
// {
// title: '姓名',
// key: 'name',
// render (row, column, index) {
// return `<strong>${row.name}</strong>`;
// }
// },
// {
// title: '年龄',
// key: 'age'
// },
// {
// title: '地址',
// key: 'address'
// },
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age',
fixed: 'left',
// width: 200
},
{
title: '地址',
key: 'address'
title: '操作',
key: 'action',
render (row, column, index) {
return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
}
}
],
data1: [
data6: [
{
name: '王小明',
age: 18,
@ -44,6 +55,11 @@
}
]
}
},
methods: {
remove (index) {
this.data6.splice(index, 1);
}
}
}
</script>
</script>