103 lines
2.8 KiB
Vue
103 lines
2.8 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>
|
|
<template v-for="item in options">
|
|
<el-table-column
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
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>
|