1、render 拓展
安装
npm install view-design --save
main.js中引入
import Vue from 'vue'
import App from './App.vue'
//引入iviewUi
import iviewUi from 'view-design'
import 'view-design/dist/styles/iview.css'
Vue.use(iviewUi)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
iview-ui table
<template>
<Table :columns="columns1" :data="data1"></Table>
</template>
<script>
export default {
data () {
return {
columns1: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age',
render:(h,params) => {
return h('div',[
h('span',params.row.age)
])
}
},
{
title: '性别',
key: 'sex',
render:(h,params) =>{
return h('div',[
h('div', this.getSex(params.row.sex))
])
}
},
{
title: '升高',
key: 'height'
},
{
title: '体重',
key: 'weight',
render:(h,params) =>{
return h('div',[
h('a',params.row.weight + 'kg')
])
}
},
{
title: '婚否',
key: 'marry',
render:(h,params) =>{
let str = ''
if(params.row.marry == 0){
str = '已婚'
}else{
str = '未婚'
}
return h("div",str)
}
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
sex: 1,
height: 180,
weight:80,
marry:0,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
sex: 0,
height: 170,
weight:70,
marry:1,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
sex: 1,
height: 182,
weight:85,marry:0,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
sex: 0,
height: 175,
weight:70,marry:1,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods:{
getSex(val){
if(val == 1){
return '男'
}else{
return '女'
}
}
}
}
</script>
<style>
</style>
ivie-ui 改变的是column数据状态,符合iview研发table的宗旨,数据驱动表格
render函数是vue自定义函数,在表格中创建组件或者元素
render函数返回的h内容是一个函数,第一个参数渲染的元素名称,第二个参数是选人文本
2、slot 拓展
使用iview-ui 也可以实现和element-ui一样的效果
注:column数据需要进行改变,从原来key改变为slot
<template>
<Table :columns="columns1" :data="data1">
<template slot-scope="{row}" slot="name">
<span><Icon type="md-person" /></span>
<span>{{row.name}}</span>
</template>
<template slot-scope="{row}" slot="age">
<span><Input v-model=" row.age " /></span>
</template>
<template slot-scope="{row}" slot="sex">
<span>{{getSex(row.sex)}}</span>
</template>
<template slot-scope="{row}" slot="height">
<span>{{row.height}}cm</span>
</template>
<template slot-scope="{row}" slot="weight">
<span>{{row.weight}}kg</span>
</template>
<template slot-scope="{row}" slot="marry">
<span>{{getMarry(row.marry)}}</span>
</template>
<template slot-scope="{row}" slot="address">
<span>{{row.address}}</span>
</template>
</Table>
</template>
<script>
export default {
data () {
return {
columns1: [
{
title: '姓名',
slot: 'name'
},
{
title: '年龄',
slot: 'age'
},
{
title: '性别',
slot: 'sex'
},
{
title: '升高',
slot: 'height'
},
{
title: '体重',
slot: 'weight'
},
{
title: '婚否',
slot: 'marry'
},
{
title: 'Address',
slot: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
sex: 1,
height: 180,
weight:80,
marry:0,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
sex: 0,
height: 170,
weight:70,
marry:1,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
sex: 1,
height: 182,
weight:85,marry:0,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
sex: 0,
height: 175,
weight:70,marry:1,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods:{
getSex(val){
if(val == 1){
return '男'
}else{
return '女'
}
},
getMarry(val){
if(val == 1){
return '已婚'
}else{
return '未婚'
}
}
}
}
</script>
<style>
</style>