自定义指令-------通过vue自定义指令，实现element-table可编辑表格功能

通过vue自定义指令，实现element-table可编辑表格功能

html内容

   <el-table-column prop="aaaa" label="自定义指令" align="center" min-width="300">
          <template slot-scope="scope" slot="header">
                <span v-fssc-required="true">自定义指令</span>
          </template>
          <template slot-scope="scope">
              <el-form-item :prop="'tableList['+ scope.$index+'].aaaa'" required>
                  <div v-edit-column>
                    	<el-select  class="edit-column-edit" v-model="value" placeholder="请选择">
                         	<el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
                     	<el-input class="edit-column-display" style="width:300px" size="mini" :value="scope.row.aaaa+ (scope.row.aaaa ?  ' - ' :'') + scope.row.aaaaTxt"></el-input>
                    </div>
                </el-form-item>
            </template>
        </el-table-column>

自定义必填指令v-fssc-required，自定义表格编辑指令v-edit-column

Vue.directive('fssc-required', {
  inserted: function (el, val) {
    if (!val.hasOwnProperty('value') || val.value === true) {
      let html = `<span style="color:#F56C6C;margin-right:3px">*</span>${el.innerHTML}`
      el.innerHTML = html;
    }
  }
});

Vue.directive('edit-column', {
  inserted: function (el, val) {
    // console.log(val,el)
    const editDom =  el.querySelector('.edit-column-edit');
    const displayDom =  el.querySelector('.edit-column-display');
    const elInputDom = el.querySelector('.el-input__inner'); 
    editDom.style.display = "none"
    // console.log(editDom,'editDom',displayDom)
    el.addEventListener('click',e=>{
      editDom.style.display = "inline-block"
      elInputDom.focus();
      displayDom.style.display = "none";
    })
    
    // console.log(elInputDom,'elInputDom----  ')
    elInputDom.addEventListener('blur',e=>{
      editDom.style.display = "none"
      displayDom.style.display = "inline-block";
    })
  }
})