elementui 的一些简单的组件封装

（持续更新中。。）

单选table需求

场景：比较简单的一种需求 具体样式还是多选的类型 不过单选的逻辑为选择某一项时触发clearSelection方法

这里我们使用radio区分这种单选的类型

代码部分

<el-table
        ref="table"
        :data="tableData"
        v-loading="tableloading"
        @selection-change="handleSelectionChange"
        @filter-change="handleFilterChange"
        @select-all="selectAll"
        @select="handleRowSelect"
        @row-click="handleRowClick"
        @sort-change="handleSortChange"
        :row-key="rowKey"
        :tree-props="treeProps"
        v-bind="$attrs"
    >
    <el-table-column fixed="left" type="selection" width="55" align="center" 
...
<!-- row-click触发clearSelection方法，然后将状态切换给另一个选项 -->
handleRowClick() {
  ...
  if (this.selectType === 'radio') {
      this.$emit('select-change', [row])
      if (this.selectRow.length > 0) {
          this.$refs.table.clearSelection()
      }
  }
  this.$refs.table.toggleRowSelection(row)
}

级联选择优化

场景需求：点击级联中选项文案label触发点击checkbox事件，以及清空选项方法

<el-cascader
        v-model="cascaderValue"
        :props="props"
        :collapse-tags="true"
        @change="handleChange"
        ref="addressPicker"
        :popper-class="popperClass"
        :clearable="allowClear"
...
clearValue() {
  this.$nextTick(() => {
      this.$refs.addressPicker.$refs.panel.clearCheckedNodes()
      this.$refs.addressPicker.$refs.panel.activePath = []
  })
},
// 点击文案时，选中前面单选框
clickRadioWhenLableBeClick() {
    const el = document.querySelector('.' + this.popperClass)
    el.addEventListener('click', function (event) {
        const target = event.target
        if (target.className === 'el-cascader-node__label') {
            target.parentNode.firstChild.click()
        }
    })
},