110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
||
<div>
|
||
<div class="action-bar">
|
||
<el-button :disabled="disabled" type="primary" class="common-button-primary add-button" size="mini" @click="onAdd">
|
||
添加
|
||
</el-button>
|
||
<el-button :disabled="disabled || selectedList.length <= 0" type="primary" class="common-button-primary add-button" size="mini" @click="onDelete">
|
||
批量删除
|
||
</el-button>
|
||
</div>
|
||
<el-table border
|
||
class="table"
|
||
ref="selection"
|
||
:data="tableData"
|
||
tooltip-effect="dark"
|
||
style="width: 100%;"
|
||
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',fontWeight: 'bold', height: '48px'}"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="50" align="center"/>
|
||
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
|
||
<el-table-column
|
||
type="index"
|
||
width="55"
|
||
label="序号"
|
||
align="center">
|
||
</el-table-column>
|
||
<template v-for="item in options">
|
||
<el-table-column
|
||
:prop="item.prop"
|
||
:label="item.label"
|
||
:min-width="item.label === '会议地点' || item.label === '参会人员（内部）' ? '91%' : ''"
|
||
align="center">
|
||
<template slot-scope="{ row, column, $index }">
|
||
<!--<el-form-item :prop="'meetingList.' + $index + '.meetingName'" :rules="rules.meetingName" label-width="0">-->
|
||
<!-- <el-input :disabled="disabled" style="margin: 10px 0;" v-model="row.meetingName"></el-input>-->
|
||
<!--</el-form-item>-->
|
||
<el-form-item :prop="parentProp + '.' + $index + '.' + item.prop" :rules="rules[item.prop]" label-width="0">
|
||
<el-input v-if="!disabled" :disabled="disabled" v-model="row[item.prop]"></el-input>
|
||
<span v-else>{{ row[item.prop] }}</span>
|
||
</el-form-item>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "TableFormItem",
|
||
props: {
|
||
data: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
// [ { label: '会议名称', prop: 'meetingName' } ]
|
||
options: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
parentProp: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: () => false
|
||
},
|
||
rules: {
|
||
type: Object
|
||
}
|
||
},
|
||
computed: {
|
||
tableData () {
|
||
return this.data.map((item, index) => {
|
||
item.index = index
|
||
return item
|
||
})
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
selectedList: [],
|
||
}
|
||
},
|
||
methods: {
|
||
handleSelectionChange (selection) {
|
||
this.selectedList = []
|
||
selection.forEach(item => {
|
||
this.selectedList.push(item.index)
|
||
})
|
||
},
|
||
onAdd () {
|
||
this.$emit('add')
|
||
},
|
||
onDelete () {
|
||
this.$emit('delete', this.selectedList)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.table {
|
||
/deep/ .el-form-item {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
</style>
|