idea安装element组件报错

Question

问题:
图一

图二

毫无头绪，是npm的问题，还是vue的问题啊，网上搜了好久，无解……害！

Answer 1

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7598381
• 你也可以参考下这篇文章：vue封装组件，类似elementUI组件库打包发布到npm上
• 除此之外, 这篇博客: vue学习笔记 （vue在idea的结构，idea中执行npm命令和配置环境变量，element-ui安装和使用，avue的安装与使用）中的 （4）示例2： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 修改App.vue：

  <template>
    <div id="app">
      <avue-crud :data="filteredData" v-loadmore="handelLoadmore" :option="option" :data-size="tableData.length"></avue-crud>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        tableData: [],
        option:{
          height:300,
          expand:true,
          selection:true,
          selectionFixed:false,
          expandFixed:false,
          menuFixed:false,
          column:[{
            label:'姓名',
            prop:'name',
            width:200,
          },{
            label:'年龄',
            prop:'sex'
          }]
        },
        currentStartIndex: 0,
        currentEndIndex: 20
      };
    },
    directives:{
      loadmore:{
        componentUpdated: function (el, binding, vnode, oldVnode) {
          // 设置默认溢出显示数量
          var spillDataNum = 20;
  
          // 设置隐藏函数
          var timeout = false;
          let setRowDisableNone = function (topNum, showRowNum, binding) {
            if (timeout) {
              clearTimeout(timeout);
            }
            timeout = setTimeout(() => {
              binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);
            });
          };
          setTimeout(() => {
            const dataSize = vnode.data.attrs['data-size'];
            const oldDataSize = oldVnode.data.attrs['data-size'];
            if (dataSize === oldDataSize) return;
            const selectWrap = el.querySelector('.el-table__body-wrapper');
            const selectTbody = selectWrap.querySelector('table tbody');
            const selectRow = selectWrap.querySelector('table tr');
            if (!selectRow) {
              return;
            }
            const rowHeight = selectRow.clientHeight;
            let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);
  
            const createElementTR = document.createElement('tr');
            let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;
            createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);
            selectTbody.append(createElementTR);
  
            // 监听滚动后事件
            selectWrap.addEventListener('scroll', function () {
              let topPx = this.scrollTop - spillDataNum * rowHeight;
              let topNum = Math.round(topPx / rowHeight);
              let minTopNum = dataSize - spillDataNum - showRowNum;
              if (topNum > minTopNum) {
                topNum = minTopNum;
              }
              if (topNum < 0) {
                topNum = 0;
                topPx = 0;
              }
              selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);
              createElementTR.setAttribute('style', `height: ${createElementTRHeight - topPx > 0 ? createElementTRHeight - topPx : 0}px;`);
              setRowDisableNone(topNum, showRowNum, binding);
            })
          });
        }
      }
    },
    created() {
      this.getTableData();
    },
    computed: {
      filteredData() {
        let list = this.tableData.filter((item, index) => {
          if (index < this.currentStartIndex) {
            return false;
          } else if (index > this.currentEndIndex) {
            return false;
          } else {
            return true;
          }
        });
        return list
      }
    },
    methods: {
      handelLoadmore(currentStartIndex, currentEndIndex) {
        this.currentStartIndex = currentStartIndex;
        this.currentEndIndex = currentEndIndex;
      },
      getTableData() {
        let cont = 0;
        let tableData = [];
        while (cont < 10000) {
          cont = cont + 1;
          let object = {
            name: '王小虎' + cont,
            sex:cont
          }
          tableData.push(object);
        }
        setTimeout(() => {
          this.tableData = tableData;
        }, 0);
      }
    }
  }
  </script>
  

  运行结果：
  

• 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第四篇综合进阶项目篇课程中的 使用element完善系统登录界面设计小节, 巩固相关知识点