博客

效果：

代码：

指定字段：

<el-table ref="dataTable" :data="userList" style="width: 100%;" @row-click="handleClickRow" @row-dblclick="rowdbclick" >
	<el-table-column prop="username" label="用户账号" :show-overflow-tooltip="true">
		<!-- 详情 -->
		<template slot-scope="scope">
			<el-link type="success" v-on:click="cellclick(scope.row)"> {{scope.row.username}} </el-link>
		</template>
	</el-table-column>
</el-table>

定义数据：

data() {
  return {
  	detailsdialog: false,
	details: {
	  username: '',
	  flag: ''
	},
	username,
  }
}

详情弹框：

<el-dialog v-drag v-dragEl :visible.sync="detailsdialog" title="用户详情">
	<div class="middle_modal_body">
		<el-form ref="details" :model="details" label-width="140px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="用户姓名" :show-overflow-tooltip="true">
					<el-input v-model="details.username" disabled style="width:100%;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户状态" :show-overflow-tooltip="true">
					<el-input v-model="details.flag" disabled style="width:100%;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</el-table>

单击单元格打开详情：

// 单击单元格打开详情
cellclick(row) {
	// 详情dialog
	this.detailsdialog = true
	// 直接把这行的值给详情，不用再调方法查了
	this.details = row;
},

双击行打开详情：

// 双击行打开详情
rowdbclick(row, column, event) {
	// 双击行内指定单元格
	// if (column.property == "username") {
	// 	this.detailsdialog = true
	// 	this.details = row
	// }
	// 双击行
	this.detailsdialog = true
	this.details = row
},