元素选择器对html进行操作

逛博客发现的

记录一下

            <el-table-column prop="name" label="预算说明">
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.name"
                  placeholder="请输入内容"
                ></el-input>
                <div class="item__txt">{{ scope.row.name }}</div>
              </div>
            </el-table-column>

    /** 点击cell */
    handleCellClick(row, column, cell, event) {
      console.log('row, column, cell, event',row, column, cell, event);
      const property = column.property;
      if (this.editProp.includes(property)) {
        // 保存cell
        this.saveCellClick(row, cell);
        cell.querySelector(".item__txt").style.display = "none";
        cell.querySelector(".item__input").style.display = "block";
        cell.querySelector("input").focus();
      }
    },

querySelector

querySelector用于查询页面中第一个符合规则的元素，可以在Document实例和Element实例上调用，接收一个选择器字符串参数，如果查找到则返回 HTMLElement 对象，否则返回null。 

实现效果：

 点击input隐藏下面的文字