浅谈Vue render函数在ElementUi中的应用

<el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column prop="date" label="日期" min-width="20%" align="center"> </el-table-column> <el-table-column prop="name" label="姓名" min-width="60%" align="center"> </el-table-column> <el-table-column prop="address" label="地址" align="center"> </el-table-column></el-table>

<el-table-column :render-header="renderHeader" prop="name" label="姓名" min-width="60%" align="center" ></el-table-column>

methods: { renderHeader (createElement) {  let self = this  return createElement('div', {  domProps: {   innerHTML: `    <span class="span">姓名</span>    <input type="text" class="input">    `  },  style: {   padding: '0',   lineHeight: '1',   marginTop: '5px',   width: '100%'  },  on: {   '!click': function (e) {   let span = document.getElementsByClassName('span')[0]   let input = document.getElementsByClassName('input')[0]   span.style.display = 'none'   input.style.display = 'inline-block'   input.focus()   event.stopPropagation()   }  }  }) } },

.span {  display: inline-block;}.input {  display: none;}

on: { '!click': function (e) { let span = document.getElementsByClassName('span')[0] let input = document.getElementsByClassName('input')[0] span.style.display = 'none' input.style.display = 'inline-block' input.focus() event.stopPropagation() }, input: function (event) {  self.inputValue = event.target.value // 在data中定义inputValue }}

watch: { inputValue: function () {  console.log(this.inputValue) } }