实现功能：

1、生成数据插入table

2、修改table的某个数据，保存后该数据进行更新

3、点击table的btn，选择的数据仍是选中状态，数据回显

示例-1-选择地址插入表格

示例-2-选择指定岗位

示例-3-选择岗位出现table里

示例-4-打开弹窗之前选择的岗位仍是选中

一、页面布局

Cascader 级联选择器选择地址插入table，插入的数据可删除，可添加岗位

页面布局代码：

先选择指定地区，然后点击右侧的确定按钮才算成功指定投放

:header-cell-style="{background:'#f4f4f5'}">

header-align="center" align="center">

删除

二、实现方法

1)Cascader 选择省市区，获得area_code

getCityFn(num) {

if (num.length != 0) {

this.area_code = num[num.length - 1] //获得省市区的code

} else {

this.area_code = ''

}

let label = ''

let options = this.cityOptions

this.areaCodeAll.forEach((code, idx) => {

let option = options.find(item => item.value === code)

if (option) {

label += option.label

// if(idx !== this.area_code_all.length - 1){

// label += '/'

// }

options = option.children

}

})

this.label = label //遍历areaCodeAll得到省市区的拼接字段名复制给label

},

2)选择省市区后，点击√才会在table中生成数据

点击√，触发getCity方法，

getCity() {

let areaCode = this.area_code

if (areaCode === 0 || areaCode) {

let idx1 = this.tableData.findIndex(item => item.area_code == areaCode)

let idx2 = this.tableData.findIndex(item => item.area_name == '全国')

if (idx1 < 0) {

// 已选择全国不能选其他地区的情况

if (idx2 == 0 && this.tableData.length == 1) {

this.$message.error('已选择全国发放，不能再单独选择地区')

return

}

// 已经选择其他地区不能选中全国的情况

if (idx2 < 0 && this.tableData.length > 0 && areaCode == 0) {

this.$message.error('已指定地区发放，当没有指定地区时才能选择全国发放')

return;

}

this.tableData.unshift({ //将数据插入表格，最新插入的在第一个

area_name: this.label,

area_code: areaCode,

professions: []

})

} else {

this.$message.error('不可重复指定')

}

} else {

this.$message.error('请先选择指定发放地区')

}

},

点击删除，可删除新增的岗位信息

// 删除发放地区/岗位

deletePost(idx, row) {

this.$confirm('确定删除吗？', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

this.tableData.splice(idx, 1)

this.$message.success('删除成功');

}).catch(() => {

this.$message.info('已取消操作');

})

},

点击指定岗位按钮，弹窗打开，选择岗位；岗位是接口请求getProfessionList获取，

1)选择岗位的弹窗布局

取 消

确 定

2)接口请求获取的岗位数据以为element-ui的tag形式出现，给每个tag默认的type是info，即灰色样式。

打开弹窗需要两个用到的变量currentEditProfessions：正在选择的岗位和 currentEditItem：正在编辑的table一行 。

//弹窗显示指定岗位

async showProfession(row) {

this.currentEditProfessions = [].concat(row.professions)

this.currentEditItem = row

this.showPostDialog = true

let res = await Http.getProfessionList()

if (res.flag === '1') {

let data = res.data

data.forEach(item => {

item.children.forEach(item => {

item.type = 'info'

item.area_code = row.area_code

})

})

this.professionList = data

}

},

3)点击tag触发点击事件，选择岗位

// 点击岗位选中岗位

clickPost(postItem) {

let idx3 = this.currentEditProfessions.findIndex(item => item.profession_id === postItem.profession_id)

if (idx3 === -1) { //如果点击的岗位不存在，就添加到岗位数组里临时保存

this.currentEditProfessions.push({

profession_id: postItem.profession_id,

name: postItem.name

})

} else {

this.currentEditProfessions.splice(idx3, 1)

}

},

4)active绑定一个方法，:class="{'active': isActive(postItem)}"

tag点击return true，再次点击return false

isActive(postItem) {

return this.currentEditProfessions.find(item => item.profession_id === postItem.profession_id) !== undefined

},

.active {

color: #409eff !important;

border: 1px solid #409eff !important;

}

5)点击弹窗确定按钮，保存岗位，保存的岗位出现在table里

// 保存岗位

savePost() {

this.currentEditItem.professions = this.currentEditProfessions //将正在编辑的岗位复制给当前编辑的套了数据的professions

this.currentEditItem = {}

this.currentEditProfessions = []

this.showPostDialog = false

this.$message.success('操作成功')

},

table的岗位数据值的获取为 {{scope.row.professions.map(it => it.name).join(',') ||'岗位不限'}}，将professions数组拼接成字符串，为空就显示为岗位不限

最终效果显示图