前言

我们是使用element组件，最近发现组件不适合我们需求，我们做了改动

一、el-radio

• el-radio纵向摆置，设置driver边距

代码如下：

<el-form-item
          ref="oneForm"
          prop="materialNum"
          class="stepOneDiv"
        >
          <div slot="label" class="receipt-step-one-slot">
            {{ $t('wms.receipt.chooseCreateType') }}
  		  </div>
          <div>
            <el-radio v-model="isRadio" label="1">{{ $t('wms.receipt.purchOrder') }}</el-radio>
            <el-divider class="receipt-step-one-divider" />
            <el-radio v-model="isRadio" label="2">{{ $t('wms.receipt.transferOrder') }}</el-radio>
            <el-divider class="receipt-step-one-divider" />
            <el-radio v-model="isRadio" label="3">{{ $t('wms.receipt.hander') }}</el-radio>
          </div>
 </el-form-item>

.receipt-step-one-divider{
    margin-bottom: 5px ;
    margin-top: 5px;
  }
  .receipt-step-one-slot{
    margin-top: 50%;
  }

二、el-table

2.1、跨页勾选导出

这里导出功能在后端，前端主要体现跨页选中以及回显的效果，
废话不说，直接撸代码吧

<el-table
    row-key="id"
    :key="tabKey"
    :data="tableData"
    style="width: 100%"
    @sort-change="sortColumn"
    @selection-change="selectionChange"
  >
    <el-table-column type="selection" reserve-selection min-width="55" />
    <el-table-column
      v-for="item in tableOption"
      :key="item.label"
      sortable="custom"
      show-overflow-tooltip
      :prop="item.key"
      :label="item.label"
      min-width="200"
    />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        <el-button type="text" size="small" @click="handleRecord(scope.row)">记录</el-button>
      </template>
    </el-table-column>
</el-table>

<script>
selectionChange(selection) {
   console.log('勾选的行数:'+ selection)
   this.ids = selection.map(v => v.id)
}
</script>

解释：
给table加上row-key属性
打开reserve-selection
监听selection-change事件

三、el-tabel表格风琴展开详细界面

<el-table
      :data="tableData"
      style="width: 100%"
      @expand-change="expandSelect"
      :row-key='getRowKeys'
      :expand-row-keys="expands"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column width="130" prop="receiptOrder" label="收货单号"/>
      <el-table-column width="85" prop="whCode" label="供应商号"/>
      <el-table-column width="130" prop="actualArrivaltime" label="实际到货时间"/>
      <el-table-column width="200" prop="operation" label="right">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)">{{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>


data() {
      return {
        expands: [],
        getRowKeys(row) {
          return row.id
        },
      }
    },

// 折叠面板每次只能展开一行
      expandSelect(row, expandedRows) {
        // expandedRows.length = 0 为关闭，否则开启
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            that.expands.push(row.id)
          }
        } else {
          that.expands = []
        }
      },

解释：
@expand-change=“expandSelect” 点击事件
:row-key=‘getRowKeys’ 获取当前行ID
:expand-row-keys=“expands” 当前行值

四、el-tree回显以及取值

<el-tree
          ref="treeBox"
          :data="treeData"
          show-checkbox
          node-key="id"
          v-loading="cmdbProjectLoading"
          class="filter-tree"
          :props="defaultProps"
          :highlight-current="true"
          :filter-node-method="filterNode"
          :default-checked-keys="treeDefCk"
></el-tree>
        
treeData: [
  {
  id: 1,
  label: 'xxx名字'
  }
],

  watch: {
    filterText(val) {
      this.$refs.treeBox.filter(val)
    }
  },

• 获取选中的值

let treeNode = this.$refs.treeBox.getCheckedNodes()

• 回显，格式：[5893, 5891]

this.$refs.treeBox.setCheckedKeys(cmdbProjectId)