element-ui中的一些用法，如table中添加进度条、tree进行单选多选

---

前言

整理一下自己遇到的并且用过的，element-ui中的方法，方便自己日后好找。

内容

1.table

在从后端拿到数据，渲染到页面上的时候，有时候需要改变一下样式，例如数据需要带单位，又或者km转化成m，又或者[经纬度]等，这个时候我们就需要统一的格式化一波。下面的例子中columns是对table进行了封装

代码如下（示例）：

//写在计算属性中的，写在data都行。下面两种写法的效果都是一样的
//element中的例子
<el-table-column
        prop="prop"
        label="正常"
        width="180">
      </el-table-column>
<el-table-column
      prop="sex"
      label="男">
    </el-table-column>
<el-table-column
      prop="grade"
      label="创建"
      :formatter="formatter">
    </el-table-column>
<el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{
     {
     scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
    
//封装的table的用法
computed
columns() {
     
      return [
        {
     label: '正常', prop: 'prop', width: 160},
        {
     
          label: this.sex == 0 ? '男' : '女',
          prop: 'sex',
          width: 100
        },
        {
     
          label: '创建', prop: 'grade', align: 'center', tooltip: true,
          formatter: (row, column, cellValue, index) => {
     
            return cellValue == null ? null : this.$createElement('el-progress', {
     
              attrs: {
     
                showText: false,
                strokeWidth: 20,
                percentage: cellValue
              }
            });
          }
        },
        {
     
          label: '分数', prop: 'grade', width: 120,
          formatter: (row, column, cellValue, index) => {
     
            return cellValue == null ? null : this.$createElement('span', {
     
              domProps: {
     
                innerText: cellValue + '分'
              }
            });
          }
        },
        {
     
          label: '经纬度', prop: 'jingwei', width: 120,
          formatter: (row, column, cellValue, index) => {
     
            return row.jing == null || row.wei == null ? null : `[${
     row.jing},${
     row.wei}]`
            });
          }
        }
      ];
    },
// 数字验证
    let checkNumber = (rule, value, callback) => {
     
      let regex = /^([1-9]\d+)?$/gi;
      if (!regex.test(value)) {
     
        callback(new Error('请输入正整数'));
      } else {
     
        callback();
      }
    };
// 输入时校验，可以不填
     num: [
            {
     required: false, message: "请输入个数", trigger: "blur"},
            {
      validator: checkNumber, trigger: 'blur' }
          ],

2.tree

树形结构可以单选多选

代码如下：

树形结构单选
<el-tree
        :props="props"
        :data="treeData"
        show-checkbox
        highlight-current
        @check="onNodeClick"
        v-if='Type=="多选"'>
      </el-tree>
      <el-tree
        ref='tree'
        :props="props"
        :data="treeData"
        node-key="id"
        :check-strictly="true"
        show-checkbox
        highlight-current
        @check="checkChange"
        v-else>
      </el-tree>

onNodeClick(checkedCurNode, checkedAllNodes) {
     
      // 多选
      let self = this
      checkedAllNodes.checkedNodes.map(i => {
     
        if (i.children) {
     
          // console.log('存在这个元素');
        } else {
     
          self.String += `${
     i.id},`
        }
      })
      // console.log(checkedCurNode, checkedAllNodes);
    },
    //单选处理逻辑
    checkChange(item, node) {
     
      if (node.checkedKeys.length > 0) {
     
        this.$refs.tree.setCheckedKeys([item.id]);
        this.String = item.id
      }
      // console.log(item)
    },


/*树状结构  只要有子级，父级是不可以选择的。意思是只有子级有复选框*/
.singleTree .el-tree-node__content {
     
  height: 0.966666rem;
  margin-top: 0.3rem;
}
.singleTree .el-tree-node__label {
     
  text-align: left;
  white-space: normal;
}
.singleTree .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__input> .el-checkbox__inner{
     
  display: inline-block;
}
.singleTree .el-tree .el-tree-node .el-checkbox__input> .el-checkbox__inner{
     
  display: none;
}

3.cascader

多级选择，如果数据的最后一层，children是空数组，这样的话，还会有一层选择，这是不合理的，所以要我们需要把最后一层的children变为null或者undefined

代码如下：

<el-cascader
              v-model="selectList"
              :options="list"
              :props='props'
              :show-all-levels="false"
              placeholder='多级选择框'
              clearable
              @change="handleChange"></el-cascader>

// 去掉children的空数组
    getData(list) {
     
      for (var i = 0; i < list.length; i++) {
     
        if (list[i].children.length < 1) {
     
          // children若为空数组，则将children设为undefined
          list[i].children= undefined;
        } else {
     
          // children若不为空数组，则继续 递归调用 本方法
          this.getData(list[i].children);
        }
      }
      return data;
    },

---