Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
f49ca0ed by 杨威
Options

新增权利人组件

1 parent 94f0489d
Inline Side-by-side
Showing 1 changed file with 214 additions and 0 deletions
1 <template>
2 <div class="temp">
3 <table class="tempTable" cellspacing="0" cellpadding="0" border="1">
4 <tr>
5 <td colspan="2" width="50px">权利</td>
6 <td colspan="2">共有方式</td>
7 <td colspan="8">
8 <el-row>
9 <el-col :span="12" class="fl">
10 <el-radio v-model="radio" label="1">单独所有</el-radio>
11 <el-radio v-model="radio" label="2">共同所有</el-radio>
12 <el-radio v-model="radio" label="3">按份共有</el-radio>
13 <el-radio v-model="radio" label="4">其他共有</el-radio>
14 </el-col>
15 <el-col :span="4" class="fr">
16 <span class="span" @click="addRow">新增</span>
17 <span class="span" @click="changeRow">修改</span>
18 <span class="span" @click="delRow">删除</span>
19 </el-col>
20 </el-row>
21 </td>
22 </tr>
23 </table>
24
25 <el-table
26 class="qlrTable"
27 :data="tableData"
28 style="width: 100%"
29 @selection-change="handleSelectionChange"
30 border
31 >
32 <el-table-column type="selection" width="40" align="center">
33 </el-table-column>
34 <el-table-column prop="qlrmc" label="权利人名称" align="center">
35 <template slot-scope="scope">
36 <el-input size="small" v-model="scope.row.qlrmc"></el-input>
37 </template>
38 </el-table-column>
39 <el-table-column prop="qlrlx" label="权利人类型" align="center">
40 <template slot-scope="scope">
41 <el-input size="small" v-model="scope.row.qlrlx"></el-input>
42 </template>
43 </el-table-column>
44 <el-table-column prop="zjzl" label="证件种类" align="center">
45 <template slot-scope="scope">
46 <el-input size="small" v-model="scope.row.zjzl"></el-input>
47 </template>
48 </el-table-column>
49 <el-table-column prop="zjh" label="证件号" align="center">
50 <template slot-scope="scope">
51 <el-input size="small" v-model="scope.row.zjh"></el-input>
52 </template>
53 </el-table-column>
54 <el-table-column prop="txdz" label="通讯地址" align="center">
55 <template slot-scope="scope">
56 <el-input size="small" v-model="scope.row.txdz"></el-input>
57 </template>
58 </el-table-column>
59 <el-table-column prop="lxdh" label="联系电话" align="center">
60 <template slot-scope="scope">
61 <el-input size="small" v-model="scope.row.lxdh"></el-input>
62 </template>
63 </el-table-column>
64 </el-table>
65 </div>
66 </template>
67
68 <script>
69 export default {
70 props: {
71 widtd: {
72 type: String,
73 default: "70%",
74 },
75 title: {
76 type: String,
77 default: "",
78 },
79 topHeight: {
80 type: String,
81 default: "15vh",
82 },
83 },
84 data() {
85 return {
86 radio: "1",
87 tableData: [
88 {
89 id: "1",
90 qlrmc: "",
91 qlrlx: "",
92 zjzl: "",
93 zjh: "",
94 txdz: "",
95 lxdh: "",
96 },
97 ],
98 //表格选中项
99 multipleSelection: {},
100 };
101 },
102 methods: {
103 //新增行数据
104 addRow() {
105 this.tableData.push({
106 id: Math.random(),
107 qlrmc: "",
108 qlrlx: "",
109 zjzl: "",
110 zjh: "",
111 txdz: "",
112 lxdh: "",
113 });
114 },
115 //修改行数据
116 changeRow() {},
117 //删除行数据
118 delRow() {
119 for (var i = 0; i < this.multipleSelection.length; i++) {
120 this.deleteArrOption(this.tableData, this.multipleSelection[i].id);
121 }
122 },
123 //选中表格某一项
124 handleSelectionChange(val) {
125 this.multipleSelection = val;
126 },
127
128 //根据id删除多重数组中的某一项
129 deleteArrOption(arr, id) {
130 for (var i = arr.length; i > 0; i--) {
131 if (arr[i - 1].id == id) {
132 arr.splice(i - 1, 1);
133 }
134 }
135 },
136
137 //供父组件调用来获取共有方式
138 getQlgyfsData(){
139 return this.radio
140 },
141 //供父组件调用来获取权利人表格数据
142 getQlrxxData(){
143 return this.tableData
144 }
145 },
146 };
147 </script>
148 <style lang="less">
149 .temp {
150 width: 100%;
151 table {
152 border-bottom: 0;
153 background-color: #fff;
154 font-size: 14px;
155 width: 100%;
156 .span {
157 color: #409eff;
158 margin-right: 10px;
159 cursor: pointer;
160 }
161 .el-radio {
162 margin-right: 20px !important;
163 }
164 td {
165 text-align: center;
166 padding: 10px 0;
167 }
168 }
169 .el-table th {
170 background-color: #fff !important;
171 }
172 el-table td,
173 .el-table th.is-leaf,
174 .el-table--border,
175 .el-table--group {
176 border-color: black;
177 }
178 .el-table--border::after,
179 .el-table--group::after,
180 .el-table::before {
181 background-color: black;
182 }
183 .el-table--border td,
184 .el-table--border th,
185 .el-table__body-wrapper
186 .el-table--border.is-scrolling-left
187 ~ .el-table__fixed {
188 border-right: 1px solid #000;
189 }
190 .el-table td,
191 .el-table th {
192 padding: 6px 0;
193 color: #333 !important;
194 font-weight: normal;
195 }
196 .el-table td,
197 .el-table th.is-leaf {
198 border-bottom: 1px solid #000;
199 }
200 .qlrTable {
201 .el-input__inner {
202 height: 20px;
203 margin: 0;
204 line-height: 20px;
205 outline: none;
206 border: none;
207 color: #606764;
208 overflow: visible;
209 cursor: text;
210 text-align: center;
211 }
212 }
213 }
214 </style>