新增权利人组件

+<template>
+	<div class="temp">
+		<table class="tempTable" cellspacing="0" cellpadding="0" border="1">
+			<tr>
+				<td colspan="2" width="50px">权利</td>
+				<td colspan="2">共有方式</td>
+				<td colspan="8">
+					<el-row>
+						<el-col :span="12" class="fl">
+							<el-radio v-model="radio" label="1">单独所有</el-radio>
+							<el-radio v-model="radio" label="2">共同所有</el-radio>
+							<el-radio v-model="radio" label="3">按份共有</el-radio>
+							<el-radio v-model="radio" label="4">其他共有</el-radio>
+						</el-col>
+						<el-col :span="4" class="fr">
+							<span class="span" @click="addRow">新增</span>
+							<span class="span" @click="changeRow">修改</span>
+							<span class="span" @click="delRow">删除</span>
+						</el-col>
+					</el-row>
+				</td>
+			</tr>
+		</table>
+
+		<el-table
+			class="qlrTable"
+			:data="tableData"
+			style="width: 100%"
+			@selection-change="handleSelectionChange"
+			border
+		>
+			<el-table-column type="selection" width="40" align="center">
+			</el-table-column>
+			<el-table-column prop="qlrmc" label="权利人名称" align="center">
+				<template slot-scope="scope">
+					<el-input size="small" v-model="scope.row.qlrmc"></el-input>
+				</template>
+			</el-table-column>
+			<el-table-column prop="qlrlx" label="权利人类型" align="center">
+				<template slot-scope="scope">
+					<el-input size="small" v-model="scope.row.qlrlx"></el-input>
+				</template>
+			</el-table-column>
+			<el-table-column prop="zjzl" label="证件种类" align="center">
+				<template slot-scope="scope">
+					<el-input size="small" v-model="scope.row.zjzl"></el-input>
+				</template>
+			</el-table-column>
+			<el-table-column prop="zjh" label="证件号" align="center">
+				<template slot-scope="scope">
+					<el-input size="small" v-model="scope.row.zjh"></el-input>
+				</template>
+			</el-table-column>
+			<el-table-column prop="txdz" label="通讯地址" align="center">
+				<template slot-scope="scope">
+					<el-input size="small" v-model="scope.row.txdz"></el-input>
+				</template>
+			</el-table-column>
+			<el-table-column prop="lxdh" label="联系电话" align="center">
+				<template slot-scope="scope">
+					<el-input size="small" v-model="scope.row.lxdh"></el-input>
+				</template>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		widtd: {
+			type: String,
+			default: "70%",
+		},
+		title: {
+			type: String,
+			default: "",
+		},
+		topHeight: {
+			type: String,
+			default: "15vh",
+		},
+	},
+	data() {
+		return {
+			radio: "1",
+			tableData: [
+				{
+					id: "1",
+					qlrmc: "",
+					qlrlx: "",
+					zjzl: "",
+					zjh: "",
+					txdz: "",
+					lxdh: "",
+				},
+			],
+			//表格选中项
+			multipleSelection: {},
+		};
+	},
+	methods: {
+		//新增行数据
+		addRow() {
+			this.tableData.push({
+				id: Math.random(),
+				qlrmc: "",
+				qlrlx: "",
+				zjzl: "",
+				zjh: "",
+				txdz: "",
+				lxdh: "",
+			});
+		},
+		//修改行数据
+		changeRow() {},
+		//删除行数据
+		delRow() {
+			for (var i = 0; i < this.multipleSelection.length; i++) {
+				this.deleteArrOption(this.tableData, this.multipleSelection[i].id);
+			}
+		},
+		//选中表格某一项
+		handleSelectionChange(val) {
+			this.multipleSelection = val;
+		},
+
+		//根据id删除多重数组中的某一项
+		deleteArrOption(arr, id) {
+			for (var i = arr.length; i > 0; i--) {
+				if (arr[i - 1].id == id) {
+					arr.splice(i - 1, 1);
+				}
+			}
+        },
+        
+        //供父组件调用来获取共有方式
+        getQlgyfsData(){
+            return this.radio
+        },
+        //供父组件调用来获取权利人表格数据
+        getQlrxxData(){
+            return this.tableData
+        }
+	},
+};
+</script>
+<style lang="less">
+.temp {
+		width: 100%;
+	table {
+		border-bottom: 0;
+		background-color: #fff;
+		font-size: 14px;
+		width: 100%;
+		.span {
+			color: #409eff;
+			margin-right: 10px;
+			cursor: pointer;
+		}
+		.el-radio {
+			margin-right: 20px !important;
+		}
+		td {
+			text-align: center;
+			padding: 10px 0;
+		}
+	}
+	.el-table th {
+		background-color: #fff !important;
+	}
+	el-table td,
+	.el-table th.is-leaf,
+	.el-table--border,
+	.el-table--group {
+		border-color: black;
+	}
+	.el-table--border::after,
+	.el-table--group::after,
+	.el-table::before {
+		background-color: black;
+	}
+	.el-table--border td,
+	.el-table--border th,
+	.el-table__body-wrapper
+		.el-table--border.is-scrolling-left
+		~ .el-table__fixed {
+		border-right: 1px solid #000;
+	}
+	.el-table td,
+	.el-table th {
+		padding: 6px 0;
+		color: #333 !important;
+		font-weight: normal;
+	}
+	.el-table td,
+	.el-table th.is-leaf {
+		border-bottom: 1px solid #000;
+	}
+	.qlrTable {
+		.el-input__inner {
+			height: 20px;
+			margin: 0;
+			line-height: 20px;
+			outline: none;
+			border: none;
+			color: #606764;
+			overflow: visible;
+			cursor: text;
+			text-align: center;
+		}
+	}
+}
+</style>