element table 示例
Posted lljboke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element table 示例相关的知识，希望对你有一定的参考价值。
1 <template> 2 <div> 3 <el-form ref="form" :model="form" label-width="80px"> 4 <el-form-item label="活动名称" prop="name"> 5 <el-input v-model="form.name"></el-input> 6 </el-form-item> 7 <el-form-item> 8 <el-button type="primary" @click="onSubmit">立即创建</el-button> 9 <el-button @click="resetForm(‘form‘)">重置</el-button> 10 </el-form-item> 11 </el-form> 12 <div style="height:20px"></div> 13 <el-button :style="{background:shift?‘gray‘:‘white‘}" @click="shiftButton">shift</el-button> 14 <el-button style="background:white;" @click="colorButton(‘white‘)"></el-button> 15 <el-button style="background:blue;" @click="colorButton(‘blue‘)"></el-button> 16 <el-button style="background:green;" @click="colorButton(‘green‘)"></el-button> 17 <el-button style="background:gray;" @click="colorButton(‘gray‘)"></el-button> 18 <el-button style="background:yellow;" @click="colorButton(‘yellow‘)"></el-button> 19 <div style="height:20px"></div> 20 <el-table 21 @selection-change="changeFun" 22 @row-click="clickRow" 23 ref="moviesTable" 24 :data="tableData" 25 :show-header=true 26 border 27 highlight-current-row 28 :row-class-name="tableRowClassName" 29 style="width: 100%"> 30 <el-table-column 31 type="selection" 32 width="55"> 33 </el-table-column> 34 <el-table-column 35 fixed 36 prop="date" 37 label="日期" 38 width="150"> 39 </el-table-column> 40 <el-table-column 41 prop="name" 42 sortable 43 label="姓名" 44 width="120"> 45 </el-table-column> 46 <el-table-column 47 prop="province" 48 label="省份" 49 width="120"> 50 </el-table-column> 51 <el-table-column 52 prop="city" 53 label="市区" 54 width="120"> 55 </el-table-column> 56 <el-table-column 57 :show-overflow-tooltip=true 58 prop="address" 59 label="地址" 60 width="300"> 61 <template slot-scope="scope"> 62 63 <div :style="{background:scope.row.color}"> 64 {{ scope.row.address }} 65 </div> 66 </template> 67 </el-table-column> 68 <el-table-column 69 prop="zip" 70 label="邮编" 71 width="120"> 72 </el-table-column> 73 <el-table-column 74 fixed="right" 75 label="操作" 76 width="100"> 77 <template slot-scope="scope"> 78 <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> 79 <el-button type="text" size="small">编辑</el-button> 80 </template> 81 </el-table-column> 82 </el-table> 83 <div style="height:20px"></div> 84 <el-pagination 85 @size-change="handleSizeChange" 86 @current-change="handleCurrentChange" 87 :current-page="currentPage4" 88 :page-sizes="[100, 200, 300, 400]" 89 :page-size="100" 90 layout="slot, prev, pager, next, jumper,sizes" 91 :total="40000"> 92 <span>1-100 共200条</span> 93 </el-pagination> 94 </div> 95 </template> 96 97 <script> 98 export default { 99 data() { 100 return { 101 multipleSelection:[],//被选中的数据 102 currentPage4: 4, 103 shift:false, 104 form: { 105 name: ‘‘, 106 region: ‘‘, 107 date1: ‘‘, 108 date2: ‘‘, 109 delivery: false, 110 type: [], 111 resource: ‘‘, 112 desc: ‘‘ 113 }, 114 tableData: [{ 115 color:"", 116 date: ‘2016-05-03‘, 117 name: ‘王小虎‘, 118 province: ‘上海‘, 119 city: ‘普陀区‘, 120 address: ‘上海市普陀区金沙江路 1518‘, 121 zip: 200333 122 }, { 123 color:"", 124 date: ‘2016-05-02‘, 125 name: ‘王小虎‘, 126 province: ‘上海‘, 127 city: ‘普陀区‘, 128 address: ‘上海市普陀区金沙江路 1518 弄‘, 129 zip: 200333 130 }, { 131 color:"", 132 date: ‘2016-05-02‘, 133 name: ‘王小虎‘, 134 province: ‘上海‘, 135 city: ‘普陀区‘, 136 address: ‘上海市普陀区金沙江路 1518 弄‘, 137 zip: 200333 138 }, { 139 color:"", 140 date: ‘2016-05-02‘, 141 name: ‘王小虎‘, 142 province: ‘上海‘, 143 city: ‘普陀区‘, 144 address: ‘上海市普陀区金沙江路 1518 弄‘, 145 zip: 200333 146 }, { 147 color:"", 148 date: ‘2016-05-02‘, 149 name: ‘王小虎‘, 150 province: ‘上海‘, 151 city: ‘普陀区‘, 152 address: ‘上海市普陀区金沙江路 1518 弄‘, 153 zip: 200333 154 }, { 155 color:"", 156 date: ‘2016-05-02‘, 157 name: ‘王小虎‘, 158 province: ‘上海‘, 159 city: ‘普陀区‘, 160 address: ‘上海市普陀区金沙江路 1518 弄‘, 161 zip: 200333 162 }, { 163 color:"", 164 date: ‘2016-05-02‘, 165 name: ‘王小虎‘, 166 province: ‘上海‘, 167 city: ‘普陀区‘, 168 address: ‘上海市普陀区金沙江路 1518 弄‘, 169 zip: 200333 170 }, { 171 color:"", 172 date: ‘2016-05-02‘, 173 name: ‘王小虎‘, 174 province: ‘上海‘, 175 city: ‘普陀区‘, 176 address: ‘上海市普陀区金沙江路 1518 弄‘, 177 zip: 200333 178 }, { 179 color:"", 180 date: ‘2016-05-04‘, 181 name: ‘王小虎‘, 182 province: ‘上海‘, 183 city: ‘普陀区‘, 184 address: ‘上海市普陀区金沙江路 1518 弄‘, 185 zip: 200333 186 }, { 187 color:"", 188 date: ‘2016-05-01‘, 189 name: ‘小虎‘, 190 province: ‘上海‘, 191 city: ‘普陀区‘, 192 address: ‘上海市普陀区金沙江路 1518 弄‘, 193 zip: 200333 194 }] 195 } 196 }, 197 methods: { 198 onSubmit() { 199 console.log(‘submit!‘); 200 }, 201 resetForm(formName) { 202 this.$refs[formName].resetFields(); 203 }, 204 handleClick(row) { 205 console.log(row); 206 }, 207 handleSizeChange(val) { 208 console.log(`每页 ${val} 条`); 209 }, 210 handleCurrentChange(val) { 211 console.log(`当前页: ${val}`); 212 }, 213 clickRow(row){//点击单元格选中该行 214 if(this.shift){ 215 this.$refs.moviesTable.toggleRowSelection(row) 216 if(this.multipleSelection.length > 2){ 217 this.$refs.moviesTable.clearSelection();//清除选中项 218 this.$refs.moviesTable.toggleRowSelection(row) 219 } 220 if(this.multipleSelection.length == 2){ 221 var tableDataArray = this.$refs.moviesTable.tableData;//当前表格的数据 222 var start = tableDataArray.indexOf(this.multipleSelection[0]); 223 var end = tableDataArray.indexOf(this.multipleSelection[1]); 224 var newArray = []; 225 if(start>end){ 226 newArray = tableDataArray.slice(end+1,start); 227 }else{ 228 newArray = tableDataArray.slice(start+1,end); 229 } 230 if(newArray.length>0){ 231 for(var i=0;i<newArray.length;i++){ 232 this.$refs.moviesTable.toggleRowSelection(newArray[i]) 233 } 234 } 235 } 236 237 238 } 239 }, 240 tableRowClassName({row, rowIndex}) {//如果该行选中则高亮 241 if (this.multipleSelection.indexOf(row)!=-1) { 242 return ‘warning-row‘; 243 } 244 return ‘‘; 245 }, 246 changeFun(val){//全选事件 247 this.multipleSelection = val; 248 }, 249 colorButton(a){//修改列的颜色 250 if(this.multipleSelection.length>0){ 251 for(var i=0;i<this.tableData.length;i++){ 252 if(this.multipleSelection.indexOf(this.tableData[i])!=-1){ 253 this.tableData[i].color=a; 254 } 255 } 256 this.$refs.moviesTable.clearSelection();//清除选中项 257 } 258 }, 259 shiftButton(){ 260 this.shift=!this.shift; 261 } 262 } 263 } 264 </script> 265 <style> 266 .el-table .warning-row { 267 background: oldlace; 268 } 269 .el-table .success-row { 270 background: #f0f9eb; 271 } 272 </style>
以上是关于element table 示例的主要内容，如果未能解决你的问题，请参考以下文章