Vue一些小技巧

1.element-ui获取el-table的行索引

el-table 加属性 :row-class-name="rowClassName" @selection-change="selectionChange",

 rowClassName({ row, rowIndex }) {
          //把每一行的索引放进row
          row.index = rowIndex;
        }

这样，即可在方法selectionChange中获取到 table 的行索引 index。

2.element-ui树形控件回显时，会出现子树选中，而父树未选中的情况。因为在保存树时存在半选中父级的情况，这时，回显就需要遍历子树，从而选中父树。

setDefaultCheckNodes(menus) {
      let self = this;
      self.checkedKeys = [];
      self.recursiveMenuId(menus);
      this.$refs.channelClassTree.setCheckedKeys(self.checkedKeys);
    },
    recursiveMenuId(items) {
      let self = this;
      self._.forEach(items, function(item, index) {
        if (item["children"] && item["children"].length > 0) {
          self.recursiveMenuId(item["children"]);
        } else {
          if (item.checked) {
            //这里的XX为树的ID
            self.checkedKeys.push(item["XXX"]);
          }
        }
      });
    }

回显时，建立好树之后直接调用setDefaultCheckNodes方法即可。

3.element-ui中实现简单搜索

search(){
	let userName = this.searchForm.name;
	let resultData = this.userList.filter(userList => {
		//这里的比较可以根据搜索需求随意转换
		if(userList.name === userName || userList.name.indexOf(userName) !== -1){
			return true;
		}
	});
	this.userList = resultData;
}

4. Vue 打包上线之后 屏蔽console.log()打印

在 vue.config.js中配置

const TerserPlugin = require('terser-webpack-plugin')
 module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}