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')
])
}
}
]