iview-table中嵌套input, select

1. 理解table如何嵌套input、select
   注：此处我使用的iview版本为 v3.4.1

<Table :data="tableData" :columns="columns">
<template slot-scope="{ row, index }" slot="key">
    <Input v-model="tempDatalist[index]['key']"/>
</template>
<template slot-scope="{ row, index }" slot="info">
    <Input v-model="tempDatalist[index]['info']"/>
</template>
<template slot-scope="{ row, index }" slot="type">
    <Select transfer v-model="tempDatalist[index]['type']" clearable :style="{width: tempDatalist[index]['type'] === 'double' ? '72%' : '100%'}">
        <Option v-for="(item, index) in types" :value="item.value" :key="'type' + index">{{ item.label }}</Option>
     </Select>
     <Select transfer v-model="tempDatalist[index]['decimal']" v-if="tempDatalist[index]['type'] === 'double'" clearable style="width:27%;">
         <Option v-for="(item, index) in decimals" :value="item.value" :key="'decimal' + index">{{ item.label }}</Option>
    </Select>
</template>
<template slot-scope="{ row, index }" slot="binded">
    <Select transfer v-model="tempDatalist[index]['binded']" clearable placeholder="数据值映射绑定">
          <Option v-for="(item, index) in bindLists" :value="item.value" :key="'bind' + index">{{ item.label }}</Option>
    </Select>
</template>
<template slot-scope="{ row, index }" slot="trendable">
    <Select transfer v-model="tempDatalist[index]['trendable']" clearable placeholder="是否显示趋势">
        <Option v-for="(item, index) in verdicts" :value="item.value" :key="'trend' + index">{{ item.label }}</Option>
    </Select>
</template>
<template slot-scope="{ row, index }" slot="sortable">
    <Select transfer v-model="tempDatalist[index]['sortable']" clearable placeholder="是否排序">
        <Option v-for="(item, index) in verdicts" :value="item.value" :key="'trend' + index">{{ item.label }}</Option>
    </Select>
</template>
<template slot-scope="{ row, index }" slot="filter_rule">
    <Select transfer v-model="tempDatalist[index]['filter_rule']" clearable placeholder="过滤条件配置" style="width:60%;">
        <Option v-for="(item, index) in rules" :value="item.value" :key="'filter' + index">{{ item.label }}</Option>
    </Select>
    <Input v-model.trim="tempDatalist[index]['filter_value']" style="width:40%;"></Input>
</template>
</Table>
<Row>
    <Col span="24">
        <Button size="default" icon="md-add" shape="circle" @click="handleAdd()" style="position:relative;left:50%;margin-left:-20px;margin-top:10px;"></Button>
    </Col>
</Row>

columns: [
       {
          title: '字段或表达式',
          slot: 'key',
          align: 'center'
        },
        {
          title: '展示名称（中文名）',
          slot: 'info',
          align: 'center'
        },
        {
          title: '字段类型',
          slot: 'type',
          align: 'center'
        },
        {
          title: '数据值映射绑定',
          slot: 'binded',
          align: 'center'
        },
        {
          title: '是否显示趋势',
          slot: 'trendable',
          align: 'center'
        },
        {
          title: '是否排序',
          slot: 'sortable',
          align: 'center'
        },
        {
          title: '过滤条件配置',
          slot: 'filter_rule',
          align: 'center'
        },
        {
          title: '操作',
          key: 'handle',
          align: 'center',
          render: (h, params) => {
            return h('Icon', {
              props: {
                type: 'ios-trash-outline'
              },
              style: {
                'font-size': '26px'
              },
              on: {
                click: () => {
                  this.handleRemove(params.row._index)
                }
              }
            })
          }
         }
],
tempDatalist: []

 

 

1.使用iview在table中嵌入button(官网例子：https://www.iviewui.com/components/table)

columns: [
    {
        title: '名称',
        key: 'name',
        align: 'center'
    },
    { 
        title: 'Action',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => { 
            return h('div', 
                [ h('Button', { 
                    props: 
                        { type: 'primary', size: 'small' },
                    style: 
                        { marginRight: '5px' },
                    on: 
                        { click: () => { 
                            this.show(params.index) } } }, 'View'), 
                    h('Button', { 
                        props: { type: 'error', size: 'small' },
                        on: 
                            { 
                                click: () => { 
                                    this.remove(params.index) 
                            } 
                        } 
                    }, 'Delete') 
                 ])
             }
      }
  ]