一、自定义指令获取光标，实现双击表格编辑
效果图：
<el-table@cell-dblclick="tableDbEdit"><el-table-columnshow-overflow-tooltipalign="center"prop="result"label="巡视结果"><template slot-scope="scope"><!-- 条件判断如果满足则显示表单，否则默认展示文字 --><el-inputv-model="scope.row.result"v-if="showInput == `result${scope.row.id}`"@blur="blurInput(scope.row, 'result', scope.row.result)"v-focus></el-input><p v-else>{{ scope.row.result }}</p></template></el-table-column></el-table>
JS:
directives: {// 通过自定义指令实现的表单自动获得光标的操作focus: {inserted: function (el) {if (el.tagName.toLocaleLowerCase() == "input") {el.focus();} else {if (el.getElementsByTagName("input")) {el.getElementsByTagName("input")[0].focus();}}el.focus();},},},methods:{tableDbEdit(row, column, event) {if (row.eleLevel != 1) {this.showInput = column.property + row.id;this.oldData[column.property] = row[column.property];console.log(row, column, event);}},// 当input失去光标后进行的操作async blurInput(row, name, value) {let obj = {};// 判断数据是否有所改变，如果数据有改变则调用修改接口if (this.oldData[name] != value) {// obj[name] = value; //被改变的数据// 然后再写调用接口，提交内容的东西就可以了}this.showInput = "";},}
二、实现可拖拽的dialog弹窗
<!-- 引入的组件,绑定自定义指令 --><alarmBall@mousedown.native="firstClick"@mouseup.native="openList"v-dragclass="po-fix"></alarmBall>
JS：
directives: {drag(el) {let oDiv = el; //当前元素let self = this; //上下文//禁止选择网页上的文字// document.onselectstart = function () {//return false;// };oDiv.onmousedown = function (e) {//鼠标按下，计算当前元素距离可视区的距离let disY = e.clientY - oDiv.offsetTop;document.onmousemove = function (e) {//通过事件委托，计算移动的距离let t = e.clientY - disY;// console.log(t)// console.log(document.documentElement.clientHeight-t)if (t <= 90) {oDiv.style.top = "90px";} else if (document.documentElement.clientHeight - t < 120) {oDiv.style.top = document.documentElement.clientHeight - 120 + "px";} else {oDiv.style.top = t + "px";}//移动当前元素// oDiv.style.top = t + "px";};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效return false;};},},
拓展：html5 div的编辑属性contenteditable实现双击编辑
<div id="add" contenteditable="true">双击编辑</div>
contenteditable 属性是 html5 中的新属性，contenteditable 属性规定元素内容是否可编辑。
可以绑定keydown 、textInput 、input等事件
