ElementUIにおけるel-treeノードの動作の実現
実はtreeのいくつかの方法はとても便利です。
this.$refs.tree.get CheckedKeys()この原生態の方法。公式文書では、行列を返します。この方法があれば、私たちは選択された各ノードのIDを得ることができます。
余計なことを言わないで、直接コードしてください。
html
スクリーンショット:
ここで、ElementUIのel-treeノードの操作の実現に関する記事を紹介します。ElementUI el-treeノードの内容については、以前の記事を検索してください。または以下の関連記事を引き続きご覧ください。これからもよろしくお願いします。
this.$refs.tree.get CheckedKeys()この原生態の方法。公式文書では、行列を返します。この方法があれば、私たちは選択された各ノードのIDを得ることができます。
余計なことを言わないで、直接コードしてください。
html
<div id="app">
<el-row>
<el-button @click="checkedKeys"> id</el-button>
<el-button @click="addNode"> </el-button>
<el-button @click="checkedKeys"> </el-button>
<el-button @click="deleteNode"> </el-button>
<br/>
<br/>
<el-tree
ref="tree"
:data="treeList"
:props="defaultProps"
@node-click="handleNodeClick"
show-checkbox=true
node-key="id"
:check-strictly="true"
>
</el-tree>
<el-input> </el-input>
<el-dialog title=" "
:visible.sync="dialogVisible"
>
<el-form ref="form">
<el-form-item label=" ">
<el-select placeholder=" " v-model="treeNode.parentId" @change="selectChange" >
<el-option label=" " :value="0"></el-option>
<el-option v-for="item in treeListData" :label="item.categoryName" :value="item.nodeId"></el-option>
</el-select>
</el-form-item>
<el-form-item label=" ">
<el-input placeholder=" " v-model="treeNode.categoryName" style="width: 220px"></el-input>
</el-form-item>
</el-form>
<span>
<el-button @click="cancleSaveNode">
</el-button>
<el-button @click="saveNode">
</el-button>
</span>
</el-dialog>
</el-row>
</div>
jsコード
<script type="text/javascript">
var _treeNode={
nodeId:0,
categoryName:"",
parentId:0
}
var app = new Vue({
el:'#app',
data:{
treeNode:_treeNode,
treeList:[],
treeListData:[], //
defaultProps:{
children: 'childList',
label: 'name'
/* label: 'categoryName'*/
},
dialogVisible:false, // ,
api:{
treeDataList:"/category/treeList.do", // , GET
saveTreeNode:"/category/saveTreeNode.do", // , GET
deleteTreeNode:"/category/deleTreeNode.do",
}
},
methods: {
cateListFunction: function () {
$.ajax({
type: "get",
url: "/category/cateList.do",
success: function (result) {
app.cateList = result;
app.treeList=result;
}, error: function (result) {
}
});
},
//
handleNodeClick: function (data) {
alert(data.id);
console.log(data);
},
// key
checkedKeys:function (data) {
alert(JSON.stringify(this.$refs.tree.getCheckedKeys()));
},
//
addNode:function () {
//
app.getTreeNode();
app.dialogVisible=true;
},
//
saveNode:function () {
//alert(app.treeNode.categoryName+app.treeNode.parentId);
axios.post(app.api.saveTreeNode,app.treeNode).then(function (resule) {
app.dialogVisible=false;
app.treeNode.parentId=0;
app.treeNode.categoryName="";
app.cateListFunction();
});
},
cancleSaveNode:function () {
app.dialogVisible=false;
app.treeNode.parentId=0;
app.treeNode.categoryName="";
},
//
selectChange:function (val) {
// select option id, id
//alert(" "+val);
},
// ( )
deleteNode:function () {
app.getTreeNode();
var str=[];
str =this.$refs.tree.getCheckedKeys();
if(str.length<=0){ // vue key
// , "[]", , 2 ,
app.$message.error(" ");
return ;
}
for(var i in str){
for(var j in app.treeListData){
if(app.treeListData[j].parentId == str[i]){
app.$message.error(" ");
return;
}
}
}
axios.post(this.api.deleteTreeNode,str).then(function (result) {
app.$message({message: ' ', type: 'success'});
app.getTreeNode();
app.cateListFunction();
});
},getTreeNode:function () {
//
axios.get(this.api.treeDataList)
.then(
function(result){
// vue , data
app.treeListData=result.data;
});
}
},
created: function () {
this.getTreeNode();
this.cateListFunction();
}
});
</script>
制御装置
/**
*
*/
@RequestMapping("/saveTreeNode.do")
@ResponseBody
public void saveTreeNode(@RequestBody TbCategory category){
System.out.println(category.getCategoryName() +"------" +category.getParentId());
categoryService.insert(category);
}
@RequestMapping("/deleTreeNode.do")
@ResponseBody
public void deleTreeNode(@RequestBody String str){
System.out.println(str);
String [] strIds = str.substring(1,str.length()-1).split(",");
for(int i =0;i<strIds.length;i++){
categoryService.delete(Long.valueOf(strIds[i])); // 1,2
}
}
以上のコードは本当に何の説明もありません。直接コードに従ってください。大丈夫です。スクリーンショット:
ここで、ElementUIのel-treeノードの操作の実現に関する記事を紹介します。ElementUI el-treeノードの内容については、以前の記事を検索してください。または以下の関連記事を引き続きご覧ください。これからもよろしくお願いします。