• 中文
    • English
  • 注册
    • 查看作者
    • ElementUI框架双击table表格单元格组件实现编辑和修改内容

      正常状态:

      ElementUI框架双击table表格单元格组件实现编辑和修改内容

      可编辑状态:

      ElementUI框架双击table表格单元格组件实现编辑和修改内容

      实现代码:

      <template>
      	<el-table 
      	:header-cell-style="{ textAlign: 'center' }" 
      	:data="tableData"
      	border fit highlight-current-row style="width: 100%" @cell-dblclick="editCell">
      		<template slot="empty">
      			<div class='nonedata'><p>暂无数据</p></div>
      		</template>
      		<el-table-column prop="id" label="序号" align="center" width="50">
      		</el-table-column>
      		<el-table-column prop="name" label="大区名称" align="center">
      			<template slot-scope="scope">
      				<div v-if="row===scope.row.id && col===scope.column.id">
      					<!-- 仅在输入框失去焦点或用户按下回车时触发"更新数据操作" -->
      					<el-input placeholder="placeholder" v-model="scope.row.name" @change="updateData">
      					</el-input>
      				</div>
      				<div v-else>
      					{{ scope.row.name }}
      				</div>
      			</template>
      		</el-table-column>
      	</el-table>
      </template>
      <script type="text/javascript">
      	//切换右侧导航选中项
      	switchTab(6);
      	var game = new Vue({
      		el: '#game',
      		data: function() {
      			return {
      				row: "",
      				/*编辑单元格:行*/
      				col: "",
      				/*编辑单元格:列*/
      				tmpRow: "",
      				/*编辑单元格:临时行数据*/
      				tableData: [],
      			}
      		},
      		/*初始化*/
      		created: function() {},
      		methods: {
      
      			/*编辑单元格*/
      			editCell: function(row, column) {
      				this.row = row.id;
      				this.col = column.id;
      				this.tmpRow = row;
      			},
      			/*更新单元格数据*/
      			updateData() {
      				$.post('{:url("后端控制器地址")}', this.tmpRow,function(data) {
      					if (data.code == 1) {
      						toastr.success(data.msg);
      					} else {
      						toastr.error(data.msg);
      					}
      				});
      			},
      		}
      	});
      </script>

    • 0
    • 0
    • 0
    • 214
    • 请登录之后再进行评论

      登录
    • 返回顶部
    • 做任务
    • 实时动态
    • 偏好设置
    • 到底部
    • 单栏布局 侧栏位置: