Browse Source

优化表格通用添加、删除方法

master
李磊 3 years ago
parent
commit
220327246e
  1. 11
      src/utils/table.js
  2. 44
      src/views/ysjl/3000/dj/common/table.vue

11
src/utils/table.js

@ -165,11 +165,12 @@ export default {
type: 'error' type: 'error'
}) })
} else { } else {
tableData$refs.selection.sort((a, b) => { for (let i = 0; i < tableData$refs.selection.length; i++) {
return a.index - b.index const index = tableData$refs.data.indexOf(tableData$refs.selection[i])
}) tableData$refs.data.splice(index, 1)
for (let i = tableData$refs.selection.length; i > 0; i--) { }
tableData$refs.data.splice(tableData$refs.selection.pop().index, 1) for (let i = 0; i < tableData$refs.data.length; i++) {
tableData$refs.data[i].index = i + 1
} }
tableData$refs.clearSelection() tableData$refs.clearSelection()
} }

44
src/views/ysjl/3000/dj/common/table.vue

@ -4,7 +4,7 @@
<el-button type="primary" @click="tableJs.addRow($refs.fubiao)"> <el-button type="primary" @click="tableJs.addRow($refs.fubiao)">
新增 新增
</el-button> </el-button>
<el-button type="danger" @click="deleteFn"> <el-button type="danger" @click="tableJs.delRow($refs.fubiao)">
删除 删除
</el-button> </el-button>
</div> </div>
@ -14,7 +14,6 @@
:data.sync="tableData" :data.sync="tableData"
border border
style="width: 100%" style="width: 100%"
@selection-change="handleSelectionChange"
> >
<el-table-column <el-table-column
type="selection" type="selection"
@ -32,7 +31,6 @@
class="inline-input" class="inline-input"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="请输入内容" placeholder="请输入内容"
@select="handleSelect"
/> />
</template> </template>
<el-table-column v-for="(k, i) in item.child" :key="i" :label="k.label" :prop="k.prop"> <el-table-column v-for="(k, i) in item.child" :key="i" :label="k.label" :prop="k.prop">
@ -42,7 +40,6 @@
class="inline-input" class="inline-input"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="请输入内容" placeholder="请输入内容"
@select="handleSelect"
/> />
</template> </template>
</el-table-column> </el-table-column>
@ -83,20 +80,13 @@ export default {
value: '/', value: '/',
id: '3' id: '3'
} }
], ]
multipleSelection: []
} }
}, },
computed: {},
created() {},
methods: { methods: {
handleSelectionChange(val) {
console.log(val)
this.multipleSelection = val
},
querySearch(queryString, cb) { querySearch(queryString, cb) {
var restaurants = this.options const restaurants = this.options
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
// callback // callback
cb(results) cb(results)
}, },
@ -104,32 +94,6 @@ export default {
return (restaurant) => { return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0) return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
} }
},
handleSelect(item) {
console.log(item)
},
addtable() {
this.tableData.push({})
},
deleteFn() {
if (this.multipleSelection.length === 0) {
this.$alert('请先选择要删除的数据', '提示', {
confirmButtonText: '确定'
})
} else {
this.multipleSelection.forEach((val, index) => {
console.log(val)
//
this.tableData.forEach((v, i) => {
console.log(v)
//
if (val.id === v.id) {
this.tableData.splice(i, 1)
}
})
})
}
} }
} }
} }

Loading…
Cancel
Save