Element-UI 组件自定义修改

1. popover组件 ， 实现点击按钮之后消失

<el-popover
  ref="popoverItem"
  placement="right"
  width="300"
  trigger="click"
  @show="showPopverSetContractId(scope.row)">
   <el-form :model="currentContractSetCostForm">
     <el-form-item prop="currentContractSetCost" label="当前合同金额：">
       <el-input v-model="currentContractSetCostForm.currentContractSetCost" label="请设置合同金额"></el-input>
     </el-form-item>
   </el-form>
   <div style="text-align: center; margin-top: 10px">
     <el-button type="success" @click="setCurrentContractCost(scope)">确认设置!</el-button>
   </div>
   <el-button slot="reference" type="text">设置合同金额</el-button>
 </el-popover>


setCurrentContractCost(scope){
   console.log(scope._self.$refs.popoverItem);
   scope._self.$refs.popoverItem.doClose();
}

这样就实现了 点击 ‘确认设置按钮之后 就消失popover组件的效果了’

2 . 更改了数组中的某个对象的某个属性值，数组列表展示的值不能够实时更新问题

• 代码：
  
  需要实现 修改图中个数信息 后边总价自动计算并更新 ， 然而现在是 我修改第一个数据之后 修改第二个数据 第一个修改的数据才会刷新
  所以需要手动让Vue去触发刷新机制
  
  

核心原理就是 先将目前修改的数据从列表中移除然后在写回去
关于 Array 的 splice() 方法用法-- 请看 Array.splice()

3. 使用element-ui 的 el-table 时 当列表中的数据不允许被全选时 我们可以设置属性隐藏掉表头的checkbox组件

<template>
		<el-table
			size="mini"
			:data="queryData"
			:header-cell-class-name="cellClass">
			<el-table-column
				align="center"
				type="selection"
				width="65"></el-table-column>
			<el-table-column align="center" label="序号" type="index" width="70"></el-table-column>
		</el-table>
		<!-- template model ends -->
	</div>
</template>

<script>
export default {
	components: { },
	data() {
		return {
			queryData: [],
			DisableSelection: true,
			// ===== field end =====
		};
	},
	created() {},
	watch: {},
	mounted() {
	},
	methods: {
		//全选按钮隐藏
		cellClass(row) {
			if (this.DisableSelection) {
				if (row.columnIndex === 0) {
					return 'DisableSelection';
				}
			}
		},
		//===== methods =======
	}
};
</script>

<style>
.el-table .DisableSelection .cell .el-checkbox__inner {
	display: none;
	position: relative;
}
.el-table .DisableSelection .cell:before {
	content: '';
	position: absolute;
}
</style>