vue中可編輯樹狀表格的程式碼如下所示：

html程式碼

 <template>
	<el-table
    :data="datatree"
    row-key="id"
    :tree-props="{children: 'children'}"
   >
    <el-table-column label="姓名" border>
        <template slot-scope="scope">
          <el-input placeholder="請輸入內容" v-show="scope.row.show" v-model="scope.row.label"></el-input>
          <span v-show="!scope.row.show">{{scope.row.label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="scope.row.show =true" >編輯</el-button>
          <el-button @click="scope.row.show =false">儲存</el-button>
        </template>
      </el-table-column>
   </el-table>
 </template>

js程式碼

<script>
export default {
	data(){
  	return {
  	datatree: [{
     id: 1,label: '水果',show:false,children: [{
      id: 4,label: '蘋果',children: [{
       id: 9,label: '蘋果皮',show:false
      },{
       id: 10,label: '蘋果仔',show:false
      }]
     }]
    },{
     id: 2,label: '蔬菜',children: [{
      id: 5,label: '青菜',show:false
     },{
      id: 6,label: '土豆',show:false
     }]
    },{
     id: 3,label: '飲料',children: [{
      id: 7,label: '冰紅茶',{
      id: 8,label: '酷兒',show:false
     }]
    }],defaultProps: {
     children: 'children',label: 'label',show:'show'
    }
  }
 }
}

效果圖

一個簡單的可編輯樹狀表格就出現了
嫌input框太大自己設定一下

到此這篇關於vue中可編輯樹狀表格的實現程式碼的文章就介紹到這了,更多相關vue樹狀表格內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！