内加入2. :data="tableData"......_el-table-column属性">
devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vuejs+element UI table的常见的属性及事件_el-table-column属性

作者：Monodyee | 2024-04-15 06:33:32

赞

踩

el-table-column属性

一.table组件的方法，事件

查看官网

二.常用的事件，属性

(一).属性

1.多选框（type = "selection"） 需要实现勾选的功能

在<el-table> 内加入<el-table-column type="selection" width="55"></el-table-column>

2.  :data="tableData"  是table的数据绑定

  1. <el-table :data="tableData">
  2.  
  3. export default {   
  4. 	data() {
  5. 		return{
  6. 			tableData: [],
  7. 		}
  8. 	}
  9. }

3.formatter  用来格式化内容  

对table的值进行处理。Function(row, column, cellValue, index){}

A.使用formatter需要注意以下几点：
  ①无论formatter出何种形式，格式化出的DOM一定都是被包含在默认的div标签内
  ②在写formatter函数时要保证有值返回，否则单元格没有内容可展示，所以if的时候别忘了else

  ③formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的。

B。查看小demo

  1. <template>
  2. 	<el-table :data="tableData3"  ref="multipleTable">
  3. 		<el-table-column type="selection" width="55" ></el-table-column>
  4. 		<el-table-column type="index" label="序号" width="60"></el-table-column>
  5. 		<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
  6. 		<el-table-column prop="date" label="日期"></el-table-column>
  7. 		<el-table-column prop="name" label="姓名"></el-table-column>
  8. 		 <el-table-column prop="IsAudit"  :formatter="formatterColumn" label="审核状态" ></el-table-column>
  9. 		<el-table-column prop="address" label="地址"></el-table-column>
  10. 	</el-table>
  11. </template>
  12. <script>
  13. export default {   
  14. 	data() {
  15. 		return {
  16. 	        tableData3: [{
  17. 	        	id:'1',
  18. 				date: '2016-05-03',
  19. 				name: '王小虎',
  20. 				address: '上海市普陀区金沙江路 1518 弄',
  21. 				IsAudit:0,
  22. 				sex:'1'
  23. 	        }, {
  24. 	        	id:'2',
  25. 				date: '2016-05-02',
  26. 				name: '王小虎',
  27. 				address: '上海市普陀区金沙江路 1518 弄',
  28. 				IsAudit:1,
  29. 				sex:'0'
  30. 	        }, {
  31. 	        	id:'3',
  32. 				date: '2016-05-02',
  33. 				name: '王小虎',
  34. 				address: '上海市普陀区金沙江路 1518 弄',
  35. 				IsAudit:10,
  36. 				sex:'-1'
  37. 	        }]
  38. 	    }
  39. 	},
  40. 	mounted() {
  41. 	},
  42. 	methods: {
  43. 		formatSex: function (row, column, cellValue, index) {
  44. 			return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  45. 		},
  46. 		//状态改成汉字
  47.         formatterColumn(row, column) {
  48.             switch(row.IsAudit){
  49.                 case 0:
  50. 	                return '未通过';
  51. 	                break;
  52.                 case 1:
  53. 	                return '审核通过';
  54. 	                break;
  55.                 case 10:
  56. 	                return '待审核';
  57. 	                break;
  58.                 case 9:
  59. 	                return '草稿';
  60. 	                break;
  61.                 default:
  62.                 	return '未知';
  63.             }
  64.         }
  65.     }
  66. }
  67. </script>

4.给table 的字段 设置相应的颜色

  1. <el-table-column label="第三方扎帐" >
  2.               <template slot-scope="{row}">
  3.                   <span style="color:red;" v-if="row.status ==2"  @click="handleModifyStatus(row)">短款-700.00/3笔</span>
  4.                   <span style="color: #1890ff;" v-else-if="row.status == 3"  @click="handleModifyStatus(row)"> 长款+100.00/1笔</span>
  5.                   <span v-else>一致</span>
  6.               </template>
  7.             </el-table-column>

5.selectable (row, index)  是否可以选中

注意：仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

使用：

  1. <template>
  2. 	<el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange">
  3. 		<el-table-column type="selection" width="55"  :selectable="selectable"></el-table-column>
  4. 	</el-table>
  5. </template>
  6. <script>
  7. export default {   
  8. 	methods: {
  9.         selectable(row, index){
  10.         	if(index === 1){
  11.         		return true;
  12.         	}else{
  13.         		return false;
  14.         	}
  15.         }
  16.     }
  17. }
  18. </script>

只有第二条是可以选中 其他不能

6.element table 禁止拖动

只需要添加个el-table-column 上添加 :resizable="false"

7. el-table 与el-checkbox 结合使用

  1. <el-table :data="tableData" border style="width: 100%">
  2.             <el-table-column prop="name" label="姓名" />
  3.             <el-table-column prop="val1" label="报警通知">
  4.                 <template slot-scope="scope">
  5.                     <el-checkbox v-model="scope.row.val1" />
  6.                 </template>
  7.             </el-table-column>
  8.             <el-table-column prop="val2" label="预警通知">
  9.                 <template slot-scope="scope">
  10.                     <el-checkbox v-model="scope.row.val2" />
  11.                 </template>
  12.             </el-table-column>
  13.         </el-table>
  14.  tableData: [
  15.                 { id: '1', name: '王小勇', val1: true, val2: true },
  16.                 { id: '2', name: '欧阳', val1: true, val2: false }
  17.             ]

8 .el-dialog弹窗垂直居中（兼容IE）

  1. .el-dialog{
  2.     display: flex;
  3.     display: -ms-flex; /* 兼容IE */
  4.     flex-direction: column;
  5.     -ms-flex-direction: column; /* 兼容IE */
  6.     margin:0 !important;
  7.     position:absolute;
  8.     top:50%;
  9.     left:50%;
  10.     transform:translate(-50%,-50%);
  11.     max-height:calc(100% - 30px);
  12.     max-width:calc(100% - 30px);
  13.   }
  14. .el-dialog .el-dialog__body{
  15.     max-height: 100%;
  16.     flex: 1;
  17.     -ms-flex: 1 1 auto; /* 兼容IE */
  18.     overflow-y: auto;
  19.     overflow-x: hidden;
  20. }
  21.  
  22. .el-dialog__wrapper {
  23.     /*隐藏ie和edge中遮罩的滚动条*/
  24.     overflow: hidden;
  25. }

(二).方法

1.row-click  点击行事件

<el-table   @row-click="handleRowChange">

handleRowChange(row, event, column){  row此行的数据      }

2.selection-change  获取选中的所有值

<el-table   @selection-change="selectionRowsChange">

selectionRowsChange(val){ val  选中的值}

三.实例

1.Element-ui 中table 默认选中 toggleRowSelection

2.简单的增删改

1.table tr 点击 复选框选中  再次点击 复选框取消选中

①设置一个全局函数

  1. exports.install = function (Vue, options) {  
  2.     //删除数组 指定的元素  
  3.     Vue.prototype.removeByValue=function(arr, val){  
  4.         for(var i=0; i<arr.length; i++) {  
  5.             if(arr[i] == val) {  
  6.                 arr.splice(i, 1);  
  7.                 break;  
  8.             }  
  9.         }  
  10.     };  
  11. };

②tableUser.vue

  1. <!--用户名 增删改 基本操作-->
  2. <template>
  3. 	<section>
  4. 		<!--工具条-->
  5. 		<el-col :span="24" class="el-table_headtoolbar" style="padding-bottom: 0px;">
  6. 			<el-form :inline="true" :model="filters" class="userform" label-width="50px">
  7. 				<el-form-item label="姓名"  prop="name">
  8. 					<el-input v-model="filters.name" placeholder="姓名"  prefix-icon="el-icon-search"></el-input>
  9. 				</el-form-item>
  10. 				<el-form-item label="性别" prop="sex">
  11. 					<el-select v-model="filters.sex" filterable placeholder="请选择" prop="sex">
  12. 					    <el-option v-for="item in sexOptions" :key="item.value"  :label="item.label" :value="item.value">
  13. 					    </el-option>
  14. 					</el-select>
  15. 				</el-form-item>
  16. 				<el-dropdown split-button type="primary" @click="btnSearch" trigger="click">
  17. 				  	检索
  18. 					<el-dropdown-menu slot="dropdown" class="lyzbtn-group" trigger="click">
  19. 						<el-dropdown-item @click.native="btnReset">重置</el-dropdown-item>
  20. 					</el-dropdown-menu>
  21. 				</el-dropdown>
  22. 				<el-dropdown split-button type="primary" @click="btnNew" trigger="click">
  23. 				  	新增
  24. 					<el-dropdown-menu slot="dropdown" trigger="click">
  25. 						<el-dropdown-item  @click.native="btnEdit">编辑</el-dropdown-item>
  26. 						<el-dropdown-item  @click.native="btnDelete">删除</el-dropdown-item>
  27. 					</el-dropdown-menu>
  28. 				</el-dropdown>
  29. 			</el-form>
  30. 		</el-col>
  31. 		<!--列表-->
  32. 		<el-table :data="users.slice((page-1)*pagesize,page*pagesize)"  highlight-current-row v-loading="listLoading"  style="width: 100%;"  @selection-change="selsUserChange" class="userTableJs" @row-click="handleRowChange"  ref="table">
  33. 			<el-table-column type="selection" width="55">
  34. 			</el-table-column>
  35. 			<el-table-column type="index" label="序号" width="60">
  36. 			</el-table-column>
  37. 			<el-table-column prop="name" label="姓名" width="120">
  38. 			</el-table-column>
  39. 			<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex">
  40. 			</el-table-column>
  41. 			<el-table-column prop="age" label="年龄" width="100" >
  42. 			</el-table-column>
  43. 			<el-table-column prop="birth" label="生日" width="120">
  44. 			</el-table-column>
  45. 			<el-table-column prop="addr" label="地址" min-width="180">
  46. 			</el-table-column>
  47. 		</el-table>
  48. 		<!--工具条-->
  49. 		<el-col :span="24" class="el-table_footertoolbar">
  50. 			<el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" :total="users.length" style="float:right;">
  51. 			</el-pagination>
  52. 		</el-col>
  53. 		<!--新增界面-->
  54. 		<el-dialog title="新增" :visible.sync="addFormVisible">
  55. 			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
  56. 				<el-form-item label="姓名" prop="name">
  57. 					<el-input v-model="addForm.name" auto-complete="off"></el-input>
  58. 				</el-form-item>
  59. 				<el-form-item label="性别">
  60. 					<el-radio-group v-model="addForm.sex">
  61. 						<el-radio class="radio" :label="1">男</el-radio>
  62. 						<el-radio class="radio" :label="0">女</el-radio>
  63. 					</el-radio-group>
  64. 				</el-form-item>
  65. 				<el-form-item label="年龄">
  66. 					<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
  67. 				</el-form-item>
  68. 				<el-form-item label="生日">
  69. 					<el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
  70. 				</el-form-item>
  71. 				<el-form-item label="地址">
  72. 					<el-input type="textarea" v-model="addForm.addr"></el-input>
  73. 				</el-form-item>
  74. 			</el-form>
  75. 			<div slot="footer" class="dialog-footer">
  76. 				<el-button @click.native="addFormVisible = false">取消</el-button>
  77. 				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
  78. 			</div>
  79. 		</el-dialog>
  80. 		<!--编辑界面-->
  81. 		<el-dialog title="编辑" :visible.sync="editFormVisible">
  82. 			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  83. 				<el-form-item label="姓名" prop="name">
  84. 					<el-input v-model="editForm.name" auto-complete="off"></el-input>
  85. 				</el-form-item>
  86. 				<el-form-item label="性别">
  87. 					<el-radio-group v-model="editForm.sex">
  88. 						<el-radio class="radio" :label="1">男</el-radio>
  89. 						<el-radio class="radio" :label="0">女</el-radio>
  90. 					</el-radio-group>
  91. 				</el-form-item>
  92. 				<el-form-item label="年龄">
  93. 					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
  94. 				</el-form-item>
  95. 				<el-form-item label="生日">
  96. 					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
  97. 				</el-form-item>
  98. 				<el-form-item label="地址">
  99. 					<el-input type="textarea" v-model="editForm.addr"></el-input>
  100. 				</el-form-item>
  101. 			</el-form>
  102. 			<div slot="footer" class="dialog-footer">
  103. 				<el-button @click.native="editFormVisible = false">取消</el-button>
  104. 				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
  105. 			</div>
  106. 		</el-dialog>
  107.     </section>
  108. </template>
  109. <script>
  110. import util from '@/utils/index'//日期的操作
  111. import { getUserListPage,batchRemoveUser,addUser,editUser} from '@/assets/api/api';//接口
  112. export default {
  113. 	data() {
  114. 		return {
  115. 			filters: {
  116. 				name: ''
  117. 			},
  118. 			//性别
  119. 			sexOptions:[
  120. 				{value: '1',label: '男'}, 
  121. 				{value: '0',label: '女'}
  122. 			],
  123. 			users: [],//表格数据 
  124. 			page: 1,//当前页数
  125. 			pagesize:10,//一页显示几条
  126. 			listLoading: false,
  127. 			sels: [],//列表选中列
  128. 			total: 0,
  129. 			editFormVisible: false,//编辑界面是否显示
  130. 			editLoading: false,
  131. 			editFormRules: {
  132. 				name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  133. 				birth: [{ type: 'date', required: true, message: '日期必须填写', trigger: 'change' }]
  134. 			},
  135. 			//编辑界面数据
  136. 			editForm: {
  137. 				id:undefined,
  138. 				name: '',
  139. 				sex:-1,
  140. 				age: 0,
  141. 				birth:new Date(),
  142. 				addr: ''
  143. 			},
  144.  
  145. 			addFormVisible: false,//新增界面是否显示
  146. 			addLoading: false,
  147. 			addFormRules: {
  148. 				name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
  149. 				birth: [{ type: 'date', required: true, message: '日期必须填写', trigger: 'change' }]
  150. 			},
  151. 			//新增界面数据
  152. 			addForm: {
  153. 				name: '',
  154. 				sex: -1,
  155. 				age: 0,
  156. 				birth: new Date(),
  157. 				addr: ''
  158. 			},
  159. 			arrID:[],
  160.  
  161. 		}
  162. 	},
  163. 	methods: {
  164. 		//性别显示转换
  165. 		formatSex: function (row, column) {
  166. 			return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  167. 		},
  168. 		//初始页page、初始每页数据数pagesize和数据data
  169. 		handleSizeChange(size){
  170. 	        this.pagesize = size;
  171. 	    },
  172. 		handleCurrentChange(val) {
  173. 			this.page = val;
  174. 			this.getUsers();
  175. 		},
  176. 		handleRowChange(row, event, column){
  177. 			var same=false;
  178.             if(this.arrID.length > 0){
  179. 				for(var i=0; i<this.arrID.length ;i++){
  180. 					if(this.arrID[i]==row.id){
  181. 						same=true;
  182. 						this.removeByValue(this.arrID, row.id);
  183. 						break;
  184. 					}
  185. 				}
  186. 				if(same==true){
  187. 	            	this.$refs.table.toggleRowSelection(row,false);
  188. 	            }else{
  189. 	            	this.$refs.table.toggleRowSelection(row,true);
  190. 	            	this.arrID.push(row.id);
  191. 	            }
  192.             }else{
  193.             	this.$refs.table.toggleRowSelection(row,true);
  194.         		this.arrID.push(row.id);
  195.             }
  196. 		},
  197. 		//获取用户列表
  198. 		getUsers() {
  199. 			let para = {
  200. 				page: this.page,
  201. 				name: this.filters.name,
  202. 				sex: this.filters.sex
  203.  
  204. 			};
  205. 			this.listLoading = true;
  206. 			getUserListPage(para).then((res) => {
  207. 				this.users = res.data.users;
  208. 				this.total = res.data.total;
  209. 				this.listLoading = false;
  210. 				
  211. 			});
  212. 		},
  213. 		//检索
  214. 		btnSearch(){
  215. 			console.log('检索')
  216. 			var searchParams = { name: this.filters.name, sex: this.filters.sex };
  217. 				//searchUser(searchParams).then(data => {
  218. 				
  219. 				//});
  220. 		},
  221. 		//重置
  222. 		btnReset(){
  223. 			this.resetForm(".userform");
  224. 		},
  225. 		//新增
  226. 		btnNew(){
  227. 			this.addFormVisible = true;
  228. 		},
  229. 		//编辑
  230. 		btnEdit(){
  231. 			var ids = this.sels.map(item => item.id);
  232. 			if(ids =='' || ids.length >1){
  233. 				this.$alert('请选择一条要编辑的记录', '提示', {
  234. 					dangerouslyUseHTMLString: true
  235. 				});
  236. 			}else{
  237. 				const obj={};
  238. 				obj.id=this.sels.map(item => item.id).toString();
  239. 				obj.name=this.sels.map(item => item.name).toString();
  240. 				console.log(this.sels.map(item => item.sex).toString())
  241. 				if(this.sels.map(item => item.sex).toString() == 1){
  242. 					obj.sex=1;
  243. 				}else if(this.sels.map(item => item.sex).toString() == 0){
  244. 					obj.sex=0;
  245. 				}else{
  246. 					obj.sex=-1;
  247. 				}
  248. 				obj.age=this.sels.map(item => item.age).toString();
  249. 				obj.birth=this.sels.map(item => item.birth).toString();
  250. 				obj.addr=this.sels.map(item => item.addr).toString();
  251. 				this.editFormVisible = true;
  252. 				this.editForm = Object.assign({},obj);
  253. 			}
  254.  
  255. 		},
  256. 		//删除
  257. 		btnDelete(){
  258. 			var ids = this.sels.map(item => item.id).toString();
  259. 			if(ids ==''){
  260. 				this.$alert('请选择要删除的记录', '提示', {
  261. 					dangerouslyUseHTMLString: true
  262. 				});
  263. 			}else{
  264. 				this.$confirm('确认删除选中记录吗？', '提示', {
  265. 					type: 'warning'
  266. 				}).then(() => {
  267. 					this.listLoading = true;
  268. 					//NProgress.start();
  269. 					let para = { ids: ids };
  270. 					batchRemoveUser(para).then((res) => {
  271. 						this.listLoading = false;
  272. 						//NProgress.done();
  273. 						this.$message({
  274. 							message: '删除成功',
  275. 							type: 'success'
  276. 						});
  277. 						this.getUsers();
  278. 					});
  279. 				}).catch(() => {
  280.  
  281. 				});
  282. 			}
  283. 		},
  284. 		//编辑
  285. 		editSubmit: function () {
  286. 			this.$refs.editForm.validate((valid) => {
  287. 				if (valid) {
  288. 					this.$confirm('确认提交吗？', '提示', {}).then(() => {
  289. 						this.editLoading = true;
  290. 						//NProgress.start();
  291. 						let para = Object.assign({}, this.editForm);
  292. 						para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  293. 						editUser(para).then((res) => {
  294. 							this.editLoading = false;
  295. 							//NProgress.done();
  296. 							this.$message({
  297. 								message: '提交成功',
  298. 								type: 'success'
  299. 							});
  300. 							this.$refs['editForm'].resetFields();
  301. 							this.editFormVisible = false;
  302. 							this.getUsers();
  303. 						});
  304. 					});
  305. 				}
  306. 			});
  307. 		},
  308. 		//新增
  309. 		addSubmit: function () {
  310. 			this.$refs.addForm.validate((valid) => {
  311. 				if (valid) {
  312. 					this.$confirm('确认提交吗？', '提示', {}).then(() => {
  313. 						this.addLoading = true;
  314. 						//NProgress.start();
  315. 						let para = Object.assign({}, this.addForm);
  316. 						para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  317. 						addUser(para).then((res) => {
  318. 							this.addLoading = false;
  319. 							//NProgress.done();
  320. 							this.$message({
  321. 								message: '提交成功',
  322. 								type: 'success'
  323. 							});
  324. 							this.$refs['addForm'].resetFields();
  325. 							this.addFormVisible = false;
  326. 							this.getUsers();
  327. 						});
  328. 					});
  329. 				}
  330. 			});
  331. 		},
  332. 		selsUserChange(sels) {
  333. 			this.sels = sels;
  334. 			if(sels.length>0){
  335. 				var valId=[];
  336. 	        	for(var i=0;i<sels.length;i++){
  337. 	        		var arrIDsame=false;
  338. 	        		valId.push(sels[i].id);
  339. 	        	}
  340. 	        	this.arrID=valId;
  341. 			}
  342. 		}
  343. 	},
  344. 	mounted() {
  345. 		this.getUsers();
  346. 		
  347. 	}
  348. }
  349. </script>

3.table行内编辑

vue slot的scope传递，要表述的意思组件中slot这个插槽上可以赋值各种属性，在调用组件的页面中可以使用<template slot-scope="props"> 来获取插槽上的属性值，获取到的值是一个对象。

(1).一行一行编辑

  1. <template>
  2. 	<el-table :data="tableData" style="width: 100%">
  3. 	    <el-table-column label="日期" width="180">
  4. 			<template slot-scope="scope">
  5. 		        <span>{{scope.row.date}}</span>
  6. 		    </template>
  7. 	    </el-table-column>
  8. 	    <el-table-column prop="name" label="姓名">
  9. 			<template slot-scope="scope">
  10. 	          	<span>{{scope.row.name}}</span>
  11. 	        </template>
  12. 		</el-table-column>
  13. 	    <el-table-column prop="address" label="地址">
  14. 			<template slot-scope="scope">
  15. 	          	<template v-if="scope.row.edit">
  16. 	            	<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
  17. 	          	</template>
  18. 	         	<span v-else>{{ scope.row.address }}</span>
  19. 	        </template>
  20. 		</el-table-column>
  21. 	    <el-table-column label="操作">
  22. 			<template slot-scope="scope">
  23. 				<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.$index, scope.row)" size="small" icon="el-icon-circle-check-outline">保存</el-button>
  24. 				<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
  25. 			</template>
  26. 	    </el-table-column>
  27. 	</el-table>
  28. </template>
  29.  
  30. <script>
  31.   export default {
  32.     data() {
  33.       return {
  34.         tableData: [{
  35.         	id:'1',
  36. 			date: '2016-05-02',
  37. 			name: '王小虎',
  38. 			address: '上海市普陀区金沙江路 1518 弄',
  39. 			edit:false
  40.         }, {
  41.         	id:'2',
  42. 			date: '2016-05-04',
  43. 			name: '王小虎',
  44. 			address: '上海市普陀区金沙江路 1517 弄',
  45. 			edit:false
  46.         }, {
  47.         	id:'3',
  48. 			date: '2016-05-01',
  49. 			name: '王小虎',
  50. 			address: '上海市普陀区金沙江路 1519 弄',
  51. 			edit:false
  52.         }, {
  53.         	id:'4',
  54. 			date: '2016-05-03',
  55. 			name: '王小虎',
  56. 			address: '上海市普陀区金沙江路 1516 弄',
  57. 			edit:false
  58.         }]
  59.       }
  60.     },
  61.     methods: {
  62. 		confirmEdit(index,row){
  63. 			row.edit = false;
  64. 			this.$message({
  65. 				message: '该地址已经成功修改',
  66. 				type: 'success'
  67. 			})
  68. 		}
  69.     }
  70.   }
  71. </script>

(2).table批量编辑列字段

  1. <template>
  2. 	<section>
  3. 		<!--工具条-->
  4. 		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5. 			<el-button v-if="editOk"  type="success" @click="btnOk" size="small" icon="el-icon-circle-check-outline">保存</el-button>
  6. 			<el-button v-else="editOk" type="primary"  @click="btnEdit" size="small" icon="el-icon-edit">编辑</el-button>
  7. 		</el-col>
  8. 		<el-table :data="tableData" style="width: 100%">
  9. 		    <el-table-column label="日期" width="180">
  10. 				<template slot-scope="scope">
  11. 			        <span>{{scope.row.date}}</span>
  12. 			    </template>
  13. 		    </el-table-column>
  14. 		    <el-table-column prop="name" label="姓名">
  15. 				<template slot-scope="scope">
  16. 		          	<span>{{scope.row.name}}</span>
  17. 		        </template>
  18. 			</el-table-column>
  19. 		    <el-table-column prop="address" label="地址">
  20. 				<template slot-scope="scope">
  21. 		          	<template  v-if="editOk">
  22. 		            	<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
  23. 		          	</template>
  24. 		         	<span v-else>{{ scope.row.address }}</span>
  25. 		        </template>
  26. 			</el-table-column>
  27. 		</el-table>
  28. 	</section>
  29. </template>
  30. <script>
  31.   export default {
  32.     data() {
  33.       return {
  34.         tableData: [{
  35.         	id:'1',
  36. 			date: '2016-05-02',
  37. 			name: '王小虎',
  38. 			address: '上海市普陀区金沙江路 1518 弄',
  39.         }, {
  40.         	id:'2',
  41. 			date: '2016-05-04',
  42. 			name: '王小虎',
  43. 			address: '上海市普陀区金沙江路 1517 弄',
  44.         }, {
  45.         	id:'3',
  46. 			date: '2016-05-01',
  47. 			name: '王小虎',
  48. 			address: '上海市普陀区金沙江路 1519 弄',
  49.         }, {
  50.         	id:'4',
  51. 			date: '2016-05-03',
  52. 			name: '王小虎',
  53. 			address: '上海市普陀区金沙江路 1516 弄',
  54.         }],
  55.         editOk:false
  56.       }
  57.     },
  58.     methods: {
  59. 		btnEdit(){
  60. 			 this.editOk=true;
  61. 		},
  62. 		btnOk(){
  63. 			this.editOk=false;
  64. 		}
  65.     }
  66.   }
  67. </script>

4. 合计

  1. <el-table
  2. 	v-loading="loading"
  3. 	:data="slywList"
  4. 	show-summary
  5. 	:summary-method="getTotal"
  6. >
  7. 	<el-table-column
  8. 		label="机构"
  9. 		align="left"
  10. 		prop="swjgmc"
  11. 		width="180"
  12. 	></el-table-column>
  13. 	// 省略
  14. 	<el-table-column label="操作" align="center">
  15. 		<template slot-scope="scope">
  16. 			<el-button
  17. 				size="mini"
  18. 				type="text"
  19. 				icon="el-icon-caret-right"
  20. 				@click="handleNextLevel(scope.row)"
  21. 				>下一级</el-button
  22. 			>
  23. 		</template>
  24. 	</el-table-column>
  25. </el-table>
  26. export default {
  27. 	data() {
  28.         return {
  29. 			loading:false,
  30. 			slywList:[]
  31. 		}
  32. 	},
  33. 	created() {
  34.         this.getList();
  35.     },
  36. 	    methods: {
  37. 		//合计操作
  38.         getTotal(param) {
  39.             const { columns, data } = param;
  40.             const sums = [];
  41.             columns.forEach((column, index) => {
  42.                 if (index === 0) {
  43.                     sums[index] = "合计";
  44.                     return;
  45.                 }
  46.                 const values = data.map((item) =>
  47.                     Number(item[column.property])
  48.                 );
  49.                 if (column.label != "操作") {
  50.                     sums[index] = values.reduce((prev, curr) => {
  51.                         const value = Number(curr);
  52.                         if (!isNaN(value)) {
  53.                             return prev + curr;
  54.                         } else {
  55.                             return prev;
  56.                         }
  57.                     }, 0);
  58.                     sums[index];
  59.                 } else {
  60.                     sums[index] = "返回";
  61.                 }
  62.             });
  63.  
  64.             return sums;
  65.         },
  66.         //table 数据查询
  67.         getList() {
  68. 			let _this = this;
  69.             this.loading = true;
  70.             listSltj(this.queryParams).then((response) => {
  71.                 this.slywList = response.rows;
  72.                 this.loading = false;
  73.                 this.currentParams = this.queryParams;
  74.                         // 获取合计行最后一列对象，作为“返回”按钮
  75.                 let backPreviousButton = document.querySelector(
  76.                     ".el-table__footer-wrapper>table>tbody>tr>.el-table_1_column_5>div"
  77.                 );
  78.                 if (
  79.                     backPreviousButton == undefined ||
  80.                     backPreviousButton == null
  81.                 ) {
  82.                     backPreviousButton = document.querySelector(
  83.                         ".el-table__footer-wrapper>table>tbody>tr>td:last-child>div"
  84.                     );
  85.                 }
  86.                 if (
  87.                     backPreviousButton == undefined ||
  88.                     backPreviousButton == null
  89.                 ) {
  90.                     backPreviousButton = document.querySelector(
  91.                         ".el-table__footer-wrapper>table>tbody>tr>td:nth-last-child(2)>div"
  92.                     );
  93.                 }
  94.  
  95.                 // "返回"元素则不进行重复添加
  96.                 if (backPreviousButton.hasChildNodes()) {
  97.                     return;
  98.                 }
  99.                 // 添加"返回"元素
  100.                 this.$nextTick(() => {
  101.                     // 添加图标
  102.                     let newI = document.createElement("i");
  103.                     newI.setAttribute("class", "el-icon-caret-left");
  104.                     backPreviousButton.appendChild(newI);
  105.                     // 添加文本
  106.                     let newSpan = document.createElement("span");
  107.                     newSpan.innerText = "返回";
  108.                     backPreviousButton.appendChild(newSpan);
  109.                     // 修改样式
  110.                     backPreviousButton.style.color = "#1890ff";
  111.                     backPreviousButton.style.fontFamily = "Arial";
  112.                     backPreviousButton.style.fontSize = "12px";
  113.                     backPreviousButton.style.cursor = "pointer";
  114.                     // 添加点击事件
  115.                     backPreviousButton.onclick = function () {
  116.                         _this.handleReturn(_this.currentParams.parentId);
  117.                     };
  118.                 });
  119.             });
  120.         },
  121.         // 下一级操作
  122.         handleNextLevel(row) {
  123.            console.log("下一级操作")
  124.         },
  125.         // 返回操作
  126.         handleReturn(id) {
  127.             console.log("返回")
  128.          
  129.         }
  130. 	}
  131. }

5. 分页时选中的数据消失 

清空选中的数据

this.$refs.table.clearSelection(); // 清除选中的数据

  1. <el-table
  2. 	ref="table"
  3. 	:data="userList"
  4. 	height="260px"
  5. 	:row-key="getRowKeys"
  6. 	@row-click="clickRow"
  7. 	@selection-change="handleSelectionChange"
  8. >
  9. 	<el-table-column
  10. 		type="selection"
  11. 		width="55"
  12. 		:reserve-selection="true"
  13. 	/>
  14. 	<el-table-column
  15. 		label="用户账号"
  16. 		prop="userName"
  17. 		width="120"
  18. 		:show-overflow-tooltip="true"
  19. 	/>
  20. 	<el-table-column
  21. 		label="用户姓名"
  22. 		prop="nickName"
  23. 		width="120"
  24. 		:show-overflow-tooltip="true"
  25. 	/>
  26. 	<el-table-column
  27. 		label="邮箱"
  28. 		prop="email"
  29. 		:show-overflow-tooltip="true"
  30. 	/>
  31. 	<el-table-column
  32. 		label="手机"
  33. 		prop="phonenumber"
  34. 		:show-overflow-tooltip="true"
  35. 	/>
  36. 	<el-table-column label="状态" align="center" prop="status">
  37. 		<template slot-scope="scope">
  38. 			<dict-tag
  39. 				:options="statusOptions"
  40. 				:value="scope.row.status"
  41. 			/>
  42. 		</template>
  43. 	</el-table-column>
  44. 	<el-table-column
  45. 		label="创建时间"
  46. 		align="center"
  47. 		prop="createTime"
  48. 		width="180"
  49. 	>
  50. 		<template slot-scope="scope">
  51. 			<span>{{ parseTime(scope.row.createTime) }}</span>
  52. 		</template>
  53. 	</el-table-column>
  54. </el-table>
  55. <pagination
  56. 	v-show="total > 0"
  57. 	:total="total"
  58. 	:page.sync="queryParams.pageNum"
  59. 	:limit.sync="queryParams.pageSize"
  60. 	@pagination="getList"
  61. />
  62. methods: {
  63. 	clickRow(row) {
  64. 		this.$refs.table.toggleRowSelection(row);
  65. 	},
  66. 	getRowKeys(row) {
  67. 		// id 是后台传递的每行信息唯一标识
  68. 		return row.userId;
  69. 	},
  70. 	// 多选框选中数据
  71. 	handleSelectionChange(selection) {
  72. 		this.userIds = selection.map(item => item.userId);
  73. 	},
  74. 	 /** 重置按钮操作 */
  75. 	resetQuery() {
  76. 		this.resetForm('queryForm');
  77. 		this.$refs.table.clearSelection(); // 清除选中的数据
  78. 	},
  79. }

6. 关于在element ui中使用switch

  1. <el-table-column label="状态" align="center" prop="status" width="100">
  2.         <template #default="scope">
  3.           <el-switch
  4.             width="60"
  5.             v-model="scope.row.status"
  6.             inline-prompt
  7.             active-color="#409eff"
  8.             inactive-color="#f00"
  9.             active-text="ON"
  10.             inactive-text="OFF"
  11.             @change="changeSwitch(scope.row)"
  12.           />
  13.         </template>
  14.       </el-table-column>
  15.  //   状态开关请求接口
  16.   function changeSwitch(row) {
  17.     console.log(row, '数据');
  18.   }

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/426261
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号