iview-ui 表格拓展

1、render 拓展

iview-ui 官网

安装

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>