工作总结1-1：调用编辑按钮里面的内容，点击查看详情

列表编号链接

在父组件中，将传给子组件的 :isReadOnly="readonlyDetail",的默认情况下设置为true

当点击详情时，

<el-table-column prop="code" label="客户编号" :show-overflow-tooltip="true" width="120px">
<template slot-scope="scope">
<el-link class="link-overflow" type="primary" @click="toDetail(scope.row)">{{scope.row.code}}</el-link>
</template>
</el-table-column>

• class的样式是给他加了后面三个点

<style lang="scss" scoped>
.link-overflow {
	::v-deep .el-link--inner {
		width: 107px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}	
}
</style>

• 当点击详情,row就是点击的时候获取这一行的内容，包含这一行的所有内容
  • 点击详情是，调用编辑接口按钮里面的内容
  • 然后只读内容设置为true;

// 点击详情

toDetail(row) {
  this.handleEdit(row.id)
  this.readonlyDetail = true
		},

关于readonlyDetail的一些处理

• 先在datal里面设置为false；

data() {
  return {
	readonlyDetail: false,
          }
          }

• 当点击修改内容时，让readonlyDetail为false,

handleEdit(rowId) {
	this.readonlyDetail = false
                    }

在三个组件上给她绑定这个readonlyDetail

<!-- 添加客户管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="980px" append-to-body :close-on-click-modal="false" v-if="open">

<el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">

<el-tab-pane label="基本信息" name="0">

<customer-basic ref="customerBasic" @submitBasic="submitBasic" :isReadOnly="readonlyDetail"/>

</el-tab-pane>

<el-tab-pane :disabled="isEdit" label="开票信息" name="1">

<customer-invoice ref="customerInvoice" :isEdit="isEdit" :isReadOnly="readonlyDetail">

</customer-invoice>

</el-tab-pane>

<el-tab-pane :disabled="isEdit" label="收货地址信息" name="2">

<customer-recipient ref="customerRecipient" :isEdit="isEdit" :isReadOnly="readonlyDetail">

</customer-recipient>

</el-tab-pane>

</el-tabs>
</el-dialog>

在子组件中

• 用props来接收父组件传过来的isReadOnly,
  • 给他定义类型和默认值

  props: {
   isReadOnly: {
   type: Boolean,
   default: false
    	}
    },
  

• 在一个form表单里面最外层，加一个:disabled="isReadOnly"