You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.6 KiB
107 lines
2.6 KiB
<template>
|
|
<div class="app-container">
|
|
<div class="searchBox">
|
|
<el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="tableJs.addRow($refs.fubiao, false)">
|
|
新增
|
|
</el-button>
|
|
<el-button type="danger" size="mini" icon="el-icon-remove-outline" @click="tableJs.delRow($refs.fubiao, false)">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
ref="fubiao"
|
|
:data.sync="tableData"
|
|
border
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
width="55"
|
|
/>
|
|
<el-table-column
|
|
v-for="(item, index) in tabelHeader"
|
|
:key="index"
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
>
|
|
<template v-if="item.type === 1" slot-scope="scope">
|
|
<el-autocomplete
|
|
v-model="scope.row[scope.column.property]"
|
|
class="inline-input"
|
|
:fetch-suggestions="querySearch"
|
|
placeholder="请输入内容"
|
|
/>
|
|
</template>
|
|
<el-table-column v-for="(k, i) in item.child" :key="i" :label="k.label" :prop="k.prop">
|
|
<template slot-scope="scope">
|
|
<el-autocomplete
|
|
v-model="scope.row[scope.column.property]"
|
|
class="inline-input"
|
|
:fetch-suggestions="querySearch"
|
|
placeholder="请输入内容"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'Table',
|
|
components: { },
|
|
props: {
|
|
tabelHeader: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
fromType: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
tableData: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
options: [
|
|
{
|
|
value: '√',
|
|
id: '1'
|
|
},
|
|
{
|
|
value: '×',
|
|
id: '2'
|
|
},
|
|
{
|
|
value: '/',
|
|
id: '3'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
querySearch(queryString, cb) {
|
|
const restaurants = this.options
|
|
const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
|
|
// 调用 callback 返回建议列表的数据
|
|
cb(results)
|
|
},
|
|
createFilter(queryString) {
|
|
return (restaurant) => {
|
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.searchBox{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
|