1 <template>
2 <div>
3 <el-form ref="form" :model="form" label-width="80px">
4 <el-col :span="8">
5 <el-form-item label="活动名称" prop="name">
6 <el-input v-model="form.name" style="width:300px"></el-input>
7 </el-form-item>
8 </el-col>
9 <el-col :span="8">
10 <el-form-item label="城市" prop="city">
11 <div @click="centerDialogVisible = true">
12 <el-input v-model="form.city" style="width:300px"></el-input>
13 </div>
14 <el-dialog
15 :show-close=false
16 :visible.sync="centerDialogVisible"
17 width="30%"
18 height="500px"
19 center>
20 <el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange">全选</el-checkbox>
21 <div style="position: relative;left:15px;height:300px;overflow: auto;">
22 <div class="table-body" v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex">
23 <div class="width185"><p>{{ partition.partitionName }}</p></div>
24 <span class="width265">
25 <el-checkbox style="width:20%" v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.id,$event)" :label="country" :key="country.id">{{country.fieldName}}</el-checkbox>
26 </span>
27 </div>
28 </div>
29 </el-dialog>
30 </el-form-item>
31 </el-col>
32 <div style="height:60px"></div>
33 <el-form-item>
34 <el-button type="primary" @click="onSubmit">查询</el-button>
35 <el-button @click="resetForm('form')">重置</el-button>
36 </el-form-item>
37 </el-form>
38 <div style="height:20px"></div>
39 <el-button :style="{background:shift?'gray':'white'}" @click="shiftButton">shift</el-button>
40 <el-button style="background:white;" @click="colorButton('white')"></el-button>
41 <el-button style="background:blue;" @click="colorButton('blue')"></el-button>
42 <el-button style="background:green;" @click="colorButton('green')"></el-button>
43 <el-button style="background:gray;" @click="colorButton('gray')"></el-button>
44 <el-button style="background:yellow;" @click="colorButton('yellow')"></el-button>
45 <div style="height:20px"></div>
46 <el-table
47 @selection-change="changeFun"
48 @row-click="clickRow"
49 ref="moviesTable"
50 :data="tableData"
51 :show-header=true
52 border
53 highlight-current-row
54 :row-class-name="tableRowClassName"
55 style="width: 100%">
56 <el-table-column
57 type="selection"
58 width="55">
59 </el-table-column>
60 <el-table-column
61 fixed
62 prop="date"
63 label="日期"
64 width="150">
65 </el-table-column>
66 <el-table-column
67 prop="name"
68 sortable
69 label="姓名"
70 width="120">
71 </el-table-column>
72 <el-table-column
73 prop="province"
74 label="省份"
75 width="120">
76 </el-table-column>
77 <el-table-column
78 prop="city"
79 label="市区"
80 width="120">
81 </el-table-column>
82 <el-table-column
83 :show-overflow-tooltip=true
84 prop="address"
85 label="地址"
86 width="300">
87 <template slot-scope="scope">
88
89 <div :style="{background:scope.row.color}">
90 {{ scope.row.address }}
91 </div>
92 </template>
93 </el-table-column>
94 <el-table-column
95 prop="zip"
96 label="邮编"
97 width="120">
98 </el-table-column>
99 <el-table-column
100 fixed="right"
101 label="操作"
102 width="100">
103 <template slot-scope="scope">
104 <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
105 <el-button type="text" size="small">编辑</el-button>
106 </template>
107 </el-table-column>
108 </el-table>
109 <div style="height:20px"></div>
110 <el-pagination
111 @size-change="handleSizeChange"
112 @current-change="handleCurrentChange"
113 :current-page="currentPage4"
114 :page-sizes="[100, 200, 300, 400]"
115 :page-size="100"
116 layout="slot, prev, pager, next, jumper,sizes"
117 :total="40000">
118 <span>1-100 共200条</span>
119 </el-pagination>
120 </div>
121 </template>
122
123 <script>
124 export default {
125 data() {
126 return {
127 ischeckAll:false,//一级全选状态
128 indeterminate:false,//一级非全选状态
129 distributorsInfo:[
130 { partitionName:'江西',
131 country:[
132 { id: "1",fieldName: "南昌",selected: false},
133 { id: "2",fieldName: "九江",selected: false},
134 { id: "3",fieldName: "鹰潭",selected: false},
135 { id: "4",fieldName: "宜春",selected: false},
136 { id: "9",fieldName: "抚州",selected: false},
137 { id: "10",fieldName: "吉安",selected: false},]
138 },
139 { partitionName:'广东',
140 country:[
141 { id: "5",fieldName: "深圳",selected: false},
142 { id: "6",fieldName: "惠州",selected: false},]
143 },
144 { partitionName:'湖南',
145 country:[
146 { id: "7",fieldName: "长沙",selected: false},
147 { id: "8",fieldName: "常德",selected: false}]
148 }
149 ],
150 checkAll: false,
151 checkedCities: [],//被选中的数据city
152 isIndeterminate: false,
153 centerDialogVisible: false,
154 multipleSelection:[],//被选中的数据
155 currentPage4: 4,
156 shift:false,
157 form: {
158 name: '',
159 region: '',
160 date1: '',
161 date2: '',
162 delivery: false,
163 type: [],
164 resource: '',
165 desc: '',
166 city:""
167 },
168 tableData: [{
169 color:"",
170 date: '2016-05-03',
171 name: '王小虎',
172 province: '上海',
173 city: '普陀区',
174 address: '上海市普陀区金沙江路 1518',
175 zip: 200333
176 }, {
177 color:"",
178 date: '2016-05-01',
179 name: '小虎',
180 province: '上海',
181 city: '普陀区',
182 address: '上海市普陀区金沙江路 1518 弄',
183 zip: 200333
184 }]
185 }
186 },
187 methods: {
188 handleCheckAllChange(e){//一级change事件
189 this.ischeckAll = e
190 if(e == true){
191 this.indeterminate = false
192 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二级全选反选不确定
193 this.distributorsInfo[i].selected = e
194 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
195 this.distributorsInfo[i].country[j].selected = e
196 }
197 }
198 }else{
199 this.indeterminate = false
200 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三级全选反选不确定
201 this.distributorsInfo[i].selected = e
202 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
203 this.distributorsInfo[i].country[j].selected = e
204 }
205 }
206 }
207 },
208 handleCheckedCountryChange(topIndex, sonId, e){//三级change事件
209 this.form.city = "";
210 var checkCount = 0;//选中的
211 var unChickCount = 0;//未选中的
212 var distributorsInfo_total = 0;//总数
213 for(var ii=0;ii<this.distributorsInfo.length;ii++){
214 distributorsInfo_total = distributorsInfo_total + this.distributorsInfo[ii].country.length;
215 for(var jj = 0; jj < this.distributorsInfo[ii].country.length; jj++){
216 if(this.distributorsInfo[ii].country[jj].id == sonId){
217 this.distributorsInfo[ii].country[jj].selected = e;
218 }
219 if(this.distributorsInfo[ii].country[jj].selected == true){
220 var tem = this.distributorsInfo[ii].country[jj].fieldName;
221 if("" == this.form.city){
222 this.form.city = tem;
223 }else{
224 this.form.city = this.form.city + "," + tem;
225 }
226 checkCount++;
227 }else{
228 unChickCount++;
229 }
230 }
231 }
232 if(checkCount == distributorsInfo_total){
233 this.ischeckAll = true
234 this.indeterminate=false
235 }else if(unChickCount == distributorsInfo_total){
236 this.ischeckAll = false
237 this.indeterminate=false
238 }else{
239 this.ischeckAll = false
240 this.indeterminate=true
241 }
242 },
243
244 onSubmit() {
245 console.log('submit!');
246 },
247 resetForm(formName) {
248 this.$refs[formName].resetFields();
249 },
250 handleClick(row) {
251 console.log(row);
252 },
253 handleSizeChange(val) {
254 console.log(`每页 ${val} 条`);
255 },
256 handleCurrentChange(val) {
257 console.log(`当前页: ${val}`);
258 },
259 clickRow(row){//点击单元格选中该行
260 if(this.shift){
261 this.$refs.moviesTable.toggleRowSelection(row)
262 if(this.multipleSelection.length > 2){
263 this.$refs.moviesTable.clearSelection();//清除选中项
264 this.$refs.moviesTable.toggleRowSelection(row)
265 }
266 if(this.multipleSelection.length == 2){
267 var tableDataArray = this.$refs.moviesTable.tableData;//当前表格的数据
268 var start = tableDataArray.indexOf(this.multipleSelection[0]);
269 var end = tableDataArray.indexOf(this.multipleSelection[1]);
270 var newArray = [];
271 if(start>end){
272 newArray = tableDataArray.slice(end+1,start);
273 }else{
274 newArray = tableDataArray.slice(start+1,end);
275 }
276 if(newArray.length>0){
277 for(var i=0;i<newArray.length;i++){
278 this.$refs.moviesTable.toggleRowSelection(newArray[i])
279 }
280 }
281 }
282
283
284 }
285 },
286 tableRowClassName({row, rowIndex}) {//如果该行选中则高亮
287 if (this.multipleSelection.indexOf(row)!=-1) {
288 return 'warning-row';
289 }
290 return '';
291 },
292 changeFun(val){//全选事件
293 this.multipleSelection = val;
294 },
295 colorButton(a){//修改列的颜色
296 if(this.multipleSelection.length>0){
297 for(var i=0;i<this.tableData.length;i++){
298 if(this.multipleSelection.indexOf(this.tableData[i])!=-1){
299 this.tableData[i].color=a;
300 }
301 }
302 this.$refs.moviesTable.clearSelection();//清除选中项
303 }
304 },
305 shiftButton(){
306 this.shift=!this.shift;
307 }
308 }
309 }
310 </script>
311 <style>
312 .el-table .warning-row {
313 background: oldlace;
314 }
315 .el-table .success-row {
316 background: #f0f9eb;
317
318 }
319 .el-dialog--center .el-dialog__body{
320 padding: 0px 20px 30px;
321 }
322 .el-dialog--center{
323 position: absolute;
324 right: 450px;
325 top: 5px;
326 }
327 </style>
浙公网安备 33010602011771号