iview表格中如何渲染开关和按钮，以及给开关默认值

效果如下图所示

image.png

HTML代码如下：

<Table border ref="list" :columns="columns" :data="list"></Table>

首先考虑的是render，代码如下，其中params.row.state就是指表格中每行中的state中的值，相当于你可以理解为这个render是自带表格的行数循环的：

            columns:[
          {
            title: '最近登录时间',
            width: 80,
            key: 'loginTime',
            align: 'center',
          },
          {
            title:'状态',
            key:'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('i-switch', {
                  props: {
                    value:params.row.state,
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                      //参数value是回调值，并没有使用到
                      // this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
                    }
                  }
                }, ),
              ]);
            }
          },
          {
            title:'操作',
            width: 200,
            key:'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.detailModal=true;
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '重置密码'),
              ]);
            }
          },
        ],

在list中写入值，代码如下：

 list:[
          {
            loginTime:'2016-8-6',
            state:false,
          },
          {
            loginTime:'2016-8-6',
            state:false,
          },
          {
            loginTime:'2016-8-6',
            state:true,
          }
        ]