Element-UI踩坑

tree 树形控件 checkChange 事件不触发

需求---需要通过父节点选择子叶节点，且部分子叶节点因为权限需要禁用

问题---默认父节点不展开，通过父节点选中子节点时，若父节点未展开过且子节点含有 disabled 节点，check-change 事件将只触发一次，则会出现点击父节点选择子节点，但再次点击父节点不取消选择子节点

解决---将 check-change 事件改为 check 事件

<template>
  <div>
    <el-tree :data = "data" ref="tree" show-checkbox node-key="id" :props = "defaultProps" check-on-click-node @check = "check" @check-change = "checkChange"> </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: [],
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                  disabled: true
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2',
              children: [
                {
                  id: 99,
                  label: '三级 2-2-2'
                },
                {
                  id: 100,
                  label: '三级 9-1-2'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    check() {
      this.arr = this.$refs.tree.getCheckedKeys(true)
      console.log(this.arr, '数据改变')
    },
    checkChange() {
      console.log('我是节点事件')
    }
  }
}
</script>

禁用未来时间

<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options = "pickerOptions">
 
<script>
data() {
  return {
    // 禁用未来时间
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now()
      }
    }
  }
}
</script>

表格复选框禁用及筛选

<el-table :data = "tableData" style="width: 100%" @filter-change = "filterChange">
  <el-table-column type="selection" :selectable = "selectable"> </el-table-column>
  <el-table-column prop="date" label="日期" :filters="type" column-key="filterKey"> </el-table-column>
  <el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎'
        },
        {
          date: '2016-05-04',
          name: '王小虎'
        },
        {
          date: '2016-05-01',
          name: '张小虎'
        },
        {
          date: '2016-05-03',
          name: '李小虎'
        }
      ],
      type: [
        { text: '2016-05-01', value: '2016-05-01' },
        { text: '2016-05-02', value: '2016-05-02' },
        { text: '2016-05-03', value: '2016-05-03' },
        { text: '2016-05-04', value: '2016-05-04' }
      ]
    }
  },
  methods: {
    // 表格筛选
    filterChange(val) {
    // val 的[filterKey]即表格的 column-key 属性
    console.log(val.filterKey)
    },
    // 复选框禁用
    selectable(row) {
    // selectable 只能返回布尔值 返回 true 为可选
    return row.name === '王小虎'
    }
  }
}
</script>

表格样式调整

ElementUI 表格样式需要加载行内以对象的形式存

<el-table
  :data = "tableData"
  :summary-method = "getSummaries"
  :header-cell-style = "{ height: '2.5rem' }"
  :row-style = "{ height: '2.5rem' }"
  :cell-style = "{ padding: '0' }"
>

header-cell-style 设置表头样式

row-style 设置每行的高度

cell-style 将默认的 padding 去除

去掉表格默认的高亮效果

/deep/.el-table__row:hover > td {
　　 background-color: transparent;
}
// 如果表格有使用 fixed 进行固定，使用上面的方法会导致部分 fixed 固定的列的高亮无法取消，推荐使用下面的方法
/deep/.el-table__body tr.hover-row > td.el-table__cell {
  background-color: transparent;
}

修改表格下划线颜色

/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #e6e6e6;
}

去除进度条的圆角

/deep/.el-progress-bar__outer {
　　border-radius: 0;
}
/deep/.el-progress-bar__inner {
　　border-radius: 0;
}
/deep/.el-progress-bar__inner {
　　"#5b8ff9;
}
 

cascader 动态加载次级项视图不更新问题

使用 ElementUI 的级联选择器时，选中一级动态渲染次级时数据添加进去但是不显示解决办法，使用 this.$set 方法

handleChange(val) {
  this.options.filter(item => {
    if (item.id === val[0]) {
      // item.children = this.children 此方法可以将数据添加进去但不会更新视图，需要使用 this.$set方法
      this.$set(item, 'children', this.children)
    }
  })
  console.log(this.options)
}

cascader 点击文本选中当前 label

mounted() {
  setInterval(() => {
    document.querySelectorAll('.el-cascader-node__label').forEach(el => {
      el.onclick = function() {
        if (this.previousElementSibling) this.previousElementSibling.click()
      }
    })
  }, 500)
},

table 相邻单元格合并

 
<div class="right_content">
  <el-table :data = "skuListInfo" :span-method = "objectSpanMethod" border>
    <el-table-column prop="name" label="名称"> </el-table-column>
    <el-table-column prop="storeIds" label="适应门店"> </el-table-column>
    <el-table-column prop="feeTypeInfo" label="费用类型"> </el-table-column>
    <el-table-column prop="productInfo" label="适用产品"> </el-table-column>
    <el-table-column prop="billing" label="计费方法"> </el-table-column>
  </el-table>
</div>
 
<script>
export default {
  data() {
    return {
      skuListInfo: [
        {
          id: 1,
          name: '普通门店',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '1',
          productInfo: '日托',
          mergeId: 1,
          feeType: '1',
          feeTypeInfo: '学费',
          billing: '月/季/年制度'
        },
        {
          id: 2,
          name: '普通门店',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '2',
          productInfo: '晚托',
          feeType: '1',
          mergeId: 1,
          feeTypeInfo: '学费',
          billing: '月/季/年制度'
        },
        {
          id: 3,
          name: '普通门店',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '3',
          productInfo: '临时托',
          feeType: '1',
          mergeId: 1,
          feeTypeInfo: '学费',
          billing: '月/季/年制度'
        },
        {
          id: 4,
          name: '普通门店',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '4',
          productInfo: '越拖',
          feeType: '1',
          mergeId: 1,
          feeTypeInfo: '学费',
          billing: '月/季/年制度'
        },
        {
          id: 9,
          name: '普通门店',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '4',
          productInfo: '全部',
          feeType: '2',
          mergeId: 1,
          feeTypeInfo: '定金',
          billing: '月/季/年制度'
        },
        {
          id: 10,
          name: '普通门店',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '4',
          productInfo: '全部',
          feeType: '3',
          mergeId: 1,
          feeTypeInfo: '学杂费',
          billing: '月/季/年制度'
        },
        {
          id: 5,
          name: '团购',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '5',
          productInfo: '寒假托',
          feeType: '2',
          mergeId: 1,
          feeTypeInfo: '定金',
          billing: '月/季/年制度'
        },
        {
          id: 6,
          name: '团购',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '5',
          productInfo: '日托',
          feeType: '1',
          mergeId: 1,
          feeTypeInfo: '学费',
          billing: '月/季/年制度'
        },
        {
          id: 7,
          name: '团购',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '5',
          productInfo: '晚托',
          feeType: '1',
          mergeId: 1,
          feeTypeInfo: '学费',
          billing: '月/季/年制度'
        },
        {
          id: 8,
          name: '大客户',
          storeIds: [1, 2, 3, 4],
          storeIdInfo: '[1, 2, 3, 4]',
          productType: '6',
          productInfo: '暑假托',
          feeType: '3',
          mergeId: 1,
          feeTypeInfo: '学杂费',
          billing: '月/季/年制度'
        }
      ],
      typeNameArr: [],
      typeNamePos: 0,
      storeArr: [],
      storePos: 0,
      feeArr: [],
      feePos: 0,
      hoverOrderArr: []
    }
  },
  mounted() {
    this.merage()
  },
  methods: {
    merageInit() {
      this.typeNameArr = []
      this.typeNamePos = 0
      this.storeArr = []
      this.storePos = 0
      this.feeArr = []
      this.feePos = 0
    },
    merage() {
      this.merageInit()
      for (let i = 0; i < this.skuListInfo.length; i += 1) {
        if (i === 0) {
          // 第一行必须存在
          this.typeNameArr.push(1)
          this.typeNamePos = 0
          this.storeArr.push(1)
          this.storePos = 0
          this.feeArr.push(1)
          this.feePos = 0
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
          // 第一列
          // eslint-disable-next-line no-lonely-if
          if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) {
            this.typeNameArr[this.typeNamePos] += 1
            this.typeNameArr.push(0)
          } else {
            this.typeNameArr.push(1)
            this.typeNamePos = i
          }
          // 第二列
          if (this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name === this.skuListInfo[i - 1].name) {
            this.storeArr[this.storePos] += 1
            this.storeArr.push(0)
          } else {
            this.storeArr.push(1)
            this.storePos = i
          }
          // 第三列
          if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name === this.skuListInfo[i - 1].name) {
            this.feeArr[this.feePos] += 1
            this.feeArr.push(0)
          } else {
            this.feeArr.push(1)
            this.feePos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) { // 用于设置要合并的列
      //   if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
      //     return {
      //       rowspan: 2, // 合并的行数
      //       colspan: 1, // 合并的猎术, 设置为0则直接不显示
      //     };
      //   }
      //   return {
      //     rowspan: 0,
      //     colspan: 0,
      //   };
      // }
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.typeNameArr[rowIndex]
        const col1 = row1 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
        console.log(row1)
        return {
          rowspan: row1,
          colspan: col1
        }
      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.storeArr[rowIndex]
        const col2 = row2 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2
        }
      } else if (columnIndex === 2) {
        // 第三列的合并方法
        const row3 = this.feeArr[rowIndex]
        const col3 = row3 > 0 ? 1 : 0 // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row3,
          colspan: col3
        }
      }
    }
  }
}
</script>