element的table表格中加入下拉框,点击新增添加一行数据

224 阅读1分钟

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;
		},