前言
我们是使用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)