element穿梭框回显
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
因项目需求, 穿梭框左侧保护地由下拉菜单动态加载, 如图:
element提供代码如下:
<el-dialog title="授权边界" :visible.sync="sendPointVisible" width="30%" center>
<div class="header">
<el-form ref="form" label-width="80px">
<el-form-item label="行政区:">
<el-select v-model="patternSpotName" multiple placeholder="请选择行政区" @change="getAreaName">
<el-option v-for="item in province" :key="item.sd001" :label="item.sd008" :value="item.sd001">
</el-option>
</el-select>
</el-form-item>
<el-transfer v-model="shareProArea.reserveIdList" :data="transferData" :titles="['未授权保护地', '已授权保护地']">
<span slot-scope="{ option }">{{ option.label }}
</span>
</el-transfer>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="sendPointVisible = false">取 消</el-button>
<el-button type="primary" @click="sendRight">授 权</el-button>
</span>
</el-dialog>
请求接口将未授权边界存入左侧
// 根据行政区获取保护地
getAreaName (row) {
if (row.length > 0) { // 有数据时请求接口
this.fetchData(row[row.length - 1])
}
},
// 根据数据表名,从后台获取各个表的所有字段的相关信息
fetchData (row) {
listReserveByAdminRegion({
'data': {
'sd001': row
}
}).then(res => {
if (res.status === 1000) {
const allData = res.data
for (let i = 0; i < allData.length; i++) {
this.ary.push({
key: allData[i].sg001, // id
label: allData[i].sg008, // proAreaName
comment: allData[i].sg001,
tabname: allData[i].sg001
})
}
this.transferData = this.$removeArray(this.ary)
} else {
this.$message.error('表字段查询失败')
}
}).catch(error => {
this.$message.error(error)
})
},
现在有需求: 修改授权保护地时, 右侧要回显且左侧不能出现与右侧相同保护地
1. 已授权id放入右侧
2. 未授权id在左侧移除(removeArray是数组去重方法, 由于左侧数据是push到数组内, 所以要进行数组去重操作)
// 授权边界回显
getReserve () {
this.transferData = [] // 左侧为授权边界清空
this.shareProArea.reserveIdList = [] // 右侧已授权边界清空
getReserveDataBySaid({
'data': {
'sa001': this.shareProArea.uid
}
}).then(res => {
if (res.status === 1000) {
const allData = res.data
for (let i = 0; i < allData.length; i++) { // 接口返回已授权id放入右侧
this.shareProArea.reserveIdList.push(allData[i].sg001)
}
for (let i = 0; i < allData.length; i++) {
this.ary.push({
key: allData[i].sg001,
label: allData[i].sg008,
comment: allData[i].sg001,
tabname: allData[i].sg001
})
}
this.transferData = this.$removeArray(this.ary) // 数组去重
}
})
},
数组去重代码
export function removeArray(ary) {
for (let i = 0; i < ary.length - 1; i++) {
let item = ary[i].key
// =>item:依次拿出的每一项
// =>i:当前拿出项的索引
// =>和当前项后面的每一项比较:起始索引应该是i+1 k < ary.length找到末尾依次比较
for (let k = i + 1; k < ary.length; k++) {
// ary[k]:后面需要拿出来和当前项比较的这个值
if (item === ary[k].key) {
// =>相等:重复了,我们拿出来的K这个比较项在原有数组中删除
// ary.splice(k, 1);
/*
* 这样做会导致数组塌陷问题:当我们把当前项删除后,后面每一项都要向前进一位,也就是原有数组的索引发生了改变,此时我们k继续累加1,下一次在拿出来的结果就会跳过一位
* 原数组 [1,2,3,4]
* i=1 =>2 我们把这一项干掉,然后i++,i=2
* 原数组 [1,3,4]
* i=2这一项是4,3这一项就错过了
* ...
*/
ary.splice(k, 1)// =>删除后不能让k累加了
k--// =>删除后先减减,在加加的时候相当于没加没减
}
}
}
return ary
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)