vue+iview使用樹形控制元件

1.開發環境 vue+iview

2.電腦系統 windows10專業版

3.在使用 vue+iview開發的過程中,我們經常會使用 iview的樹形控制元件,在這裡我就簡單的做一個分享,希望對你有所幫助!

4.在template中新增如下程式碼:

<Scroll style="width: 100%" height="760">
 <Tree
   @on-select-change="chentreelick"
   :data="treedata"
    expand-node
 ></Tree>
</Scroll>

5.在 return 中新增如下程式碼:

treedata: [
    {
     title: "parent 1",chenshow: false,expand: true,children: [
      {
       title: "parent 1-1",children: [
        {
         title: "leaf 1-1-1",chenshow: true,},{
         title: "leaf 1-1-2",selected: true,],{
       title: "parent 1-2",children: [
        {
         title: "leaf 1-2-1",{
         title: "leaf 1-2-1",{
       title: "parent 1-3",children: [
        {
         title: "leaf 1-3-1",{
         title: "leaf 1-3-1",{
       title: "parent 1-4",children: [
        {
         title: "leaf 1-4-1",{
         title: "leaf 1-4-1",{
       title: "parent 1-5",children: [
        {
         title: "leaf 1-5-1",{
         title: "leaf 1-5-1",{
       title: "parent 1-6",children: [
        {
         title: "leaf 1-6-1",{
         title: "leaf 1-6-1",{
       title: "parent 1-7",children: [
        {
         title: "leaf 1-7-1",{
         title: "leaf 1-7-1",{
       title: "parent 1-8",children: [
        {
         title: "leaf 1-8-1",{
         title: "leaf 1-8-1",{
       title: "parent 1-9",children: [
        {
         title: "leaf 1-9-1",{
         title: "leaf 1-9-1",

5-1.注意 這個 return中繫結的資料,可以參考 iview官方文件,地址如下:

https://www.iviewui.com/components/tree

6.在 methods中新增如下程式碼:

chentreelick(data) {
   console.log(data);
   console.log("點選了");
   console.log(data[0].chenshow);
  },//注意:引數 data,在點選的時候可以獲取到後臺的資料,這個資料是來自後臺的,在實際開發中,我們可以 利用 data,把後臺需要的id傳給 後臺

到此這篇關於vue+iview使用樹形控制元件的具體使用的文章就介紹到這了,更多相關vue iview 樹形控制元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！