el-tree 与table表格联动

el-tree 与table表格联动_第1张图片 

html部分 

 

js部分 

// 调用 Tree 实例对象的 filter 方法来过滤树节点。 方法的参数就是过滤关键字
const filterText = ref('')
const treeRef = ref()
const defaultProps = {
  children: 'children',
  label: 'title',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const queryForm = ref({
  pageNo: 1,
  pageSize: 10,
  name: '',
  code: '',
  pid: 0,

})

// 过滤查询
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.title.includes(value)
}

// 切换tree pid
const handleNodeClick = async (node: any) => {
  queryForm.value.pid = node.id;
  const res = await getOrgValue(queryForm.value)
  tableData.value = res.rows
}

你可能感兴趣的:(vue.js,elementui,javascript)