工作第六天

1.批量删除

        

<el-button
class="set-common-btn blank-blue-button"
type="danger"
size="mini"
@click.native="removeBatch"
>批量删除
</el-button>



js


removeBatch() {
let ids = this.selection.map(item => {
return item.id
});
console.log('----------ids--------------------',ids);
if (ids === null || ids.length === 0) {
this.$message({
message: this.$t('common.mustSelectOne'),
type: 'warning'
})
return false
}
this.$confirm(this.$t('common.deleteConfirm'), this.$t('common.tooltip'), {
confirmButtonText: this.$t('button.submit'),
cancelButtonText: this.$t('button.cancel'),
type: 'warning'
}).then(() => {
tTestGirlApi.removeBatch(ids).then(() => {
this.$message({
message: this.$t('common.optionSuccess'),
type: 'success'
})
this.reset()
}).catch(err => {
this.$notify.error({
title: '错误',
message: err
})
})
}).catch(() => {
})
},


api

removeBatch: function (ids) {
return request({
url: '/test/girl/removeBatch',
method: 'delete',
data:ids
})
},


后端

@RequestMapping(value = "removeBatch", method = RequestMethod.DELETE)
@BussinessLog(value = "删除女孩", key = "ids")
public void removeBatch(@RequestBody List<Long> ids){
tTestGirlService.delete(ids);
}

注：要定义数组

selection:[]

手动定义:handleSelectionChange(val) {
  this.selection = val;
}

在表格定义

<el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row
          @current-change="handleCurrentChange"  @selection-change="handleSelectionChange">

2.在新增界面加入下拉框

<el-select v-model="form.hasGirlFriend" placeholder="是否有女朋友">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>