Vue Element UI笔记

1.el-table单元格行合并的问题

在el-table 上增加 :span-method="objectSpanMethod"
同时定义一个数据
      spanArr: [],
//对List的数据处理
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      this.spanArr = [];
      this.pos = 0;
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          //spanArr 用于存放没一行记录的合并数
          this.spanArr.push(1);
          //pos是spanArr的索引
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].AssetProject === data[i - 1].AssetProject) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    //合并行的方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
　　　　//也可以对每行某个属性进行合并
        //if (row[column.property] == '合格' || row[column.property] == '不合格') {
　　　　//第1和第2列进行行的合并
      if (columnIndex == 0 || columnIndex == 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { rowspan: _row, colspan: _col };
      }
    },

　　

2.修改el-table中单元格值为1的背景色

     el-table绑定一下

    :cell-style="cellStyle"

cellStyle({ row, column, rowIndex, columnIndex }) {
      //row[column.property] 每行每列值为1
      if (row[column.property] == 1) {
        if (row.Score > 0) {
          return "background: #cbe5bd";
        } else {
          return "background:#ebc1c1";
        }
      }
    },

 

3.js 对象中Key用变量名代替

let key = 'aa'

//加个【】
let data = {
　　[key]: 'value'
}

　　

4.实现el-dialog弹窗可以拖拽

创建一个自定义指令----directive.js

// Vue自定义指令

// dialog可以拖来拖去
const directive = Vue => {
    Vue.directive('drag2anywhere', {
    // 当被绑定的元素插入到 DOM 中时……
        inserted: (el) => {
            el.style.overflow = 'hidden';
            const target = el.childNodes[0];
            const targetHeader = target.childNodes[0];
            let isOnclick = false;
            let mouseX;
            let mouseY;
            let objX;
            let objY;
            targetHeader.onmousedown = (event) => {
                isOnclick = true;
                target.style.cursor = 'move';
                target.style.left = target.offsetLeft + 'px'; // 先记录之前的位置
                target.style.top = target.offsetTop + 'px'; // 先记录之前的位置
                target.style.margin = '0'; // 去掉margin
                mouseX = event.clientX;
                mouseY = event.clientY;
                objX = parseInt(target.style.left || target.offsetLeft);
                objY = parseInt(target.style.top || target.offsetTop);
                document.onmousemove = null; // 解绑监听鼠标拖动事件
                document.onmousemove = (event) => { // 监听鼠标拖动事件
                    if (isOnclick) {
                        event = event || window.event;
                        target.style.left = parseInt(event.clientX - mouseX + objX) + 'px';
                        target.style.top = parseInt(event.clientY - mouseY + objY) + 'px';
                    }
                };
            };
            targetHeader.onmouseup = (event) => { // 松开鼠标
                isOnclick = false;
                target.style.cursor = 'default';
            };
        }
    });
};
export default directive;

在main.js中引用

// 引入自定义指令 
import directive from './public/utils/directive'; 
// 注册自定义指令 
Vue.use(directive);

在el-dialog中加入自定义指令

<el-dialog v-drag2anywhere
           title="弹窗标题"
           :visible.sync="visible"
           append-to-body>
</el-dialog>

 

5.解决图片无法加载的问题和部署直接使用Dist就行的问题

1.使用动态引用。

   <el-image
          :src="require('../assets/sie-logo-petrol-rgb.svg')"
          style="width: 200px; height: 65px; margin-right: 7px"
        />

2.加入vue.config.js文件 里面的代码如下

module.exports = {
    publicPath: './'
}

发布的时候直接使用dist就可以。

类似如下网址访问:

http://127.0.0.1/PDM/IQCPage/dist/IQCProject.html