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>

View Code