element的table表格中加入下拉选框,点击新增添加一行数据,填写数据
//新增
<el-button type="primary" v-if="pageType!=='watch'" @click="addLength">新增</el-button>
<el-table ref="singleTable" :data="form.deptCollection" border style="width: 100%">
<el-table-column label="序号" type="index" width="80" align="center"/>
<el-table-column type="type" label="项目名称" width="370" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.belong_dept_id" clearable placeholder="请选择">
<el-option :value="scope.row.belong_dept_id" :label="scope.row.belong_dept_name" :key="scope.row.belong_dept_id" style="height:230px;overflow: auto;background-color:#fff">
<el-tree ref="treeForm" :data="seleTree" :props="defaultProps" :expand-on-click-node="false" node-key="id" :default-expanded-keys="[1]" :default-checked-keys="[0]" @node-click="(node, list)=>handleNodeClick(node, list, scope.row)"></el-tree>
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
新增按钮
这里对数组长度点击添加长度规范数据字段
// 新增按钮
addLength(){
//数据结构
this.form.deptCollection.push({
belong_dept_id:"",
belong_dept_name:'',
total_amount:''
})
},
el-tree树形结构数据
通过接口获取树形结构的数据
// 部门列表
treeselect(){
treeselectGet(this.$store.state.user.business_entity).then(res=>{
this.seleTree=res.data
})
},
下拉框事件及回显 通过方法进行回显,可以修改row的数据。
// 部门点击
handleNodeClick(node,list, row){
row.belong_dept_id = node.id
row.belong_dept_name = node.label;
},