vue3+TS+elementplus记录element-plus树形控件懒加载树记录⼀下 懒加载传数据
树形组件懒加载 需要添加lazy属性，load⽅法才会⽣效
load属性需要传⼊⼀个该树形节点加载时所调⽤的函数
load函数接收两个参数，⼀个是node，即当前节点，⼀个是resolve作为数据处理函数
<template>
<el-row>
<el-col :span="9">
<div class="tree">
<el-scrollbar>
<div class="filter">
<el-input
v-model="filterText"
placeholder="输⼊关键字进⾏过滤"
size="small"
/>
</div>
<el-tree
ref="treeRef"
:data="data"
:props="props"
lazy
:load="loadNode"
node-key="id"
@node-click="getCurrentNode"
:filter-node-method="filterNode"
/>
</el-scrollbar>
</div>
</el-col>
<el-col :span="15">
<div class="region">
<div class="region-button">
<div class="button">
<el-button-group>
<el-button size="mini" type="primary" @click="addchildren">
<el-icon><circle-plus /></el-icon>新增下级</el-button
>
<el-button size="mini" type="primary" @click="regionDelete"
><el-icon><delete /></el-icon>删除</el-button
>
<el-button
size="mini"
type="primary"
@click="dialogVisible = true"
><el-icon><upload /></el-icon>导⼊</el-button
>
<el-button size="mini" type="primary"
><el-icon><download /></el-icon>导出</el-button
>
</el-button-group>
</div>
</div>
<div class="region-body">
<div class="body">
ref="formRef"
:
model="form"
label-width="120px"
:rules="regionRules"
>
<el-form-item label="⽗区划编号:" prop="parentCode"> <el-input
v-model="form.parentCode"
placeholder="请输⼊⽗区划编号"
:disabled="true"
size="small"
></el-input>
</el-form-item>
<el-form-item label="⽗区划名称:" prop="parentName"> <el-input
v-model="form.parentName"
placeholder="请输⼊⽗区划名称"
:disabled="true"
size="small"
></el-input>
</el-form-item>
<el-form-item label="区划编号:" prop="subCode">
<el-input
v-model="form.subCode"
placeholder="请输⼊区划编号"
size="small"
>
<template #prepend>
{{ form.parentCode }}
</template>
</el-input>
</el-form-item>
<el-form-item label="区划名称:" prop="name">
<el-input
v-model="form.name"
placeholder="请输⼊区划名称"
clearable
size="small"
/>
</el-form-item>
<el-form-item label="区划等级:" prop="regionLevel"> <el-radio-group v-model="ionLevel">
<el-radio :label="0">国家</el-radio>
<el-radio :label="1">省份/直辖市</el-radio>
<el-radio :label="2">地市</el-radio>
<el-radio :label="3">区县</el-radio>
<el-radio :label="4">乡镇</el-radio>
<el-radio :label="5">村委</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="区划排序:" prop="sort">
<el-input-number
resize="both"
placeholder="请输⼊区划排序"
class="text"
v-model="form.sort"
:min="0"
:max="1000000000"
vue element admincontrols-position="right"
@change="handleChange"
size="small"
/>
</el-form-item>
<el-form-item label="区划备注:">
v-model="ark"
type="textarea"
placeholder="请输⼊区划备注"
size="small"
></el-input>
</el-form-item>
</el-form>
<el-button size="mini" type="primary" @click="handleSubmit"
><el-icon><check /></el-icon>提交</el-button
>
<el-button size="mini" @click="handleReset">
<el-icon><delete /></el-icon>清空
</el-button>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- modal -->
<div class="updwn-model">
<el-dialog v-model="dialogVisible" title="⾏政区划数据导⼊" width="30%">
<el-form-item label="模板上传:">
<el-upload
class="upload-demo"
drag
action="picode/posts/"
multiple
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">将⽂件拖到此处，或 <em>点击上传</em></div> <template #tip>
<div class="el-upload__tip">请上传 .xls,.xlsx 标准格式⽂件</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="数据覆盖" :required="true"
><el-switch v-model="value" active-text="否" inactive-text="是"
/></el-form-item>
<el-form-item label="模板下载:">
<el-button type="primary" size="mini" @click="excelDownLoad">点击下载
<el-icon><download /> </el-icon>
</el-button>
</el-form-item>
</el-dialog>
</div>
</template>
<script lang="ts">
import {
CirclePlus,
Download,
Upload,
Delete,
Check
} from '@element-plus/icons'
import { UploadFilled } from '@element-plus/icons-vue'
import { computed, defineComponent, reactive, ref, watch } from 'vue'
import {
getRegionDetail,
getRegionLazyTreeList,
remove,
submit
} from '@/service/api/base/region/region'
import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
export default defineComponent({
name: 'Yregion',
components: {
//注册组件
UploadFilled,
CirclePlus,
Download,
Upload,
Delete,
Check
/
/注册图标组件名称
},
setup() {
const store = useStore()
const props = {
id: 'id',
label: 'title',
children: 'children',
isLeaf: 'leaf'
}
interface Tree {
id: string
title: string
children?: Tree[]
}
const button = computed(() => s['region/getRegionButton']) console.log(button)
const loadNode = (node: any, resolve: (data: Tree[]) => void) => {
let parentCode = ''
if ((parentCode = node.level === 0 ? '00' : node.data.id)) {
getRegionLazyTreeList(parentCode).then((res) => {
resolve(
res.data.map((item: any) => {
return {
...item,
leaf: !item.hasChildren
}
})
)
})
}
}
const treeRef = ref<InstanceType<typeof ElTree>>()
const filterText = ref('')
watch(filterText, (val) => {
treeRef.value!.filter(val)
})
const filterNode = (value: string, data: Tree) => {
if (!value) return true
return data.title.indexOf(value) !== -1
}
let data: Tree[] = []
const initTree = () => {
data = []
getRegionLazyTreeList(topCode).then((res) => {
data = res.data.data.map((item: any) => {
return {
...item,
leaf: !item.hasChildren
}
})
})
}
// 模态框显⽰
const dialogVisible = ref(false)
let form = reactive({
code: '',
id: '',
name: '',
parentCode: '',
parentName: '',
subCode: '',
regionLevel: '',
remark: '',
sort: ''
})
const num = ref(undefined)
const handleChange = (value: number) => {
console.log(value)
}
// 点击传值
let treeCode = ''
let treeParent = ''
const getCurrentNode = (item: any) => {
console.log(JSON.parse(JSON.stringify(item)))
treeCode = item.id
treeParent = item.parentId
const code = treeCode
getRegionDetail(code).then((res: any) => {
console.log(res)
form.parentCode = res.data.parentCode
form.parentName = res.data.parentName
form.name = res.data.name
form.sort = res.data.sort
form.subCode = de.replace(treeParent, '')
})
}
/
/ 新增(新增⽗数据)
const addchildren = () => {
if (form.subCode == '' || form.name == '') {
ElMessage.warning({ message: '请先选择⼀项区划', type: 'warning' }) return
}
form.parentCode = de + form.subCode
form.parentName = form.name
form.subCode = ''
form.name = ''
}
// 删除
const regionDelete = () => {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
return remove(treeCode)
})
.
then(() => {
ElMessage.success({
message: '删除成功!'
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论