element table 示例
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>
posted on 2019-05-25 19:01 longlinji 阅读(1253) 评论(0) 编辑 收藏 举报
