leezng / vue-json-pretty Goto Github PK
View Code? Open in Web Editor NEWA JSON tree view component that is easy to use and also supports data selection.
Home Page: https://leezng.github.io/vue-json-pretty
License: MIT License
A JSON tree view component that is easy to use and also supports data selection.
Home Page: https://leezng.github.io/vue-json-pretty
License: MIT License
项目本身作为一个 vue 的插件,建议把
{
"dependencies": {
"vue": "^2.3.0"
},
}
改成
{
"peerDependencies": {
"vue": "^2.3.0"
},
}
typeScript中使用有tslint提示,求一个.d.ts文件配置
[...] // 4 items
{...} // 3 keys
This project is a great work. It is helpful. Thank you.
One small drawback is: Currently all the keys and values are styled the same. I would like to showcase the selectable keys and values differently so that users can immediately see only few keys and values are clickable. (Background color on hover is good, but without hovering on the node, just by looking at all the nodes it is difficult to say which nodes are clickable and which are not).
When using the function pathSelectable
to customize the selectable behavior of a node, could you please add the classes vjs__selectable__value
, vjs__selectable_key
to the value and key respectively so that:
For example, the below screenshot illustrates the css overrides, where the usual keys and values take grey colors, and only the selectable keys and selectable values highlighted with different color, and underline, so that it is visually easy for users to understand that these keys and values are different and special.
如果不隐藏掉样式会很奇怪,向右偏移了。
设置层级以后,json数据量很大的话,一个个点击展开非常麻烦,建议增加一键展开和一键叠起功能。
Thanks for this nice library. I am using on my report page to show various query results.
One of the result contains an array with lots of items and I wonder:
if I can make the field to be collapsed by default and just showing items count.
...
requests: [...] // 3 items
https://jsbin.com/fomudog/edit?html,console
"[Vue warn]: Unknown custom element: <vue-json-pretty> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.
found in
---> <App>
<Root>"
// App
const App = Vue.component('app', {
render(create) {
return create('div', [
create('vue-json-pretty', {
props: {
data: "{ key: 'value' }"
}
})
])
}
})
// Use
Vue.use(VueJsonPretty)
// Instance
new Vue({
render(create) {
return create(App)
}
}).$mount('#app')
I use vue-json-pretty with nuxtjs. But it dont work because "document is undefined".
Can you make a version for this integration?
我把vue-json-pretty放在了element的下拉选择的el-option组件中,结果点击vue-json-pretty无法冒泡让el-select选中相应的值,因为被vue-json-pretty阻止冒泡了。如果开发者需要阻止冒泡,他可以选择在click事件上加上.stop修饰符。
Just for convenience, instead of overriding the default CSS when necessary, it'd be nice if it can be imported separately. (SCSS or CSS, w/e)
I prefer control over styling, rather than just having it thrown into DOM as is.
Two options here... But perhaps the best would be:
vue-json-pretty/src/assets/less/tree.less
Line 17 in 2af2d84
vue-json-pretty/src/assets/less/tree.less
Line 34 in 2af2d84
Is it possible for the selection of these two symbols to be configurable?
🍻Now I have created a new react branch for developing the react version. The first phase will directly rewrite the original vue code, and the second phase will optimize and transform the existing code. Finally, the npm package will be released independently, and react
and vue
will be released in parallel on github.
在使用中发现会对data中的下级对象数据根据key来排序,是否可以增加参数来控制是否需要排序?现在哪里的代码是对data进行排序的,我没有发现,能否告知?谢谢
I would like to be able to add specific css to certain nodes from a certain JSON key.
So for example, all text nodes are now vjs-value vjs-value__string
but I'd like it when I use the following JSON:
stackTrace: 'trace here with lots of line endings and very unreadable if they are ignore'
That it would turn into vjs-value vjs-value__string stackTrace
. Or maybe vjs-key-stackTrace
to avoid existing CSS names.
In my case, I want to set white-space: pre-line
to this specific strack trace string, otherwise it's quite unreadable.
因为在数据量比较大,层级较深的时候,不好快速定位到要选取的节点位置
I installed this script in my website that is made using nuxt and vuejs but when i install your package my page shows a 404 error.
Can anyone know why?
I want add a event: v-on:dblclick.native="handleCopy"
copy the column json data
if json like this:
{
"a": "123",
"b": "234",
"c": "345"
}
when i double click "c": "345"
column, i will get the data of 345
i was do like this:
<vue-json-pretty
:data="message"
selectableType="tree"
v-on:dblclick.native="handleCopy"
></vue-json-pretty>
handleCopy(path, data) {
console.info(data)
},
but the console log is undefined
.
是不是可以把这个click和doubleclick的 event也给用户暴露出来,定制自己的双击复制功能。
Hi @leezng
I've seen this pull request #14 is closed since "selectedPath" is conflicting with "selectedType".
However, I would like to see this feature with a configurable option.
You can let the user choose whether they want to highlight the selected item or not in both cases (tree or checkbox view).
What's your opinion on this idea? If you think this makes sense, let me know I will make a new pull request with this feature.
Cheers,
Ruby.
In a displayed object, if I click on {} or [] brackets, they are collapsing. Can I turn this feature off somehow?
I'm using this component inside a long list of items, so I'm using https://github.com/Akryum/vue-virtual-scroller to improve performance. I'm using its DynamicScroller
which supports variable height entries, but which must be notified when an item's height changes. It would be useful for vue-json-pretty to emit an event when the user clicks on brackets to toggle visibility of nested data.
I took a look at the source; I see that the brackets mixin emits an 'update:visible' event to allow binding sync, but it looks like vue doesn't bubble that event up outside of vue-json-pretty, as I can't seem to bind them in my code.
Guys how i can maked values with types string wrapped by ' single quotes.
{"error":"<h1>x</h1>"}
Rather than showing the literal value <h1>x</h1>
, the html is parsed and text is rendered bigger due to h1 tag.
Could you please release a new version with the latest changes?
I just noticed that it has a change that would make a difference for me. Namely removing whitespace around string values (15d8ff7#diff-7a5275c00fd81236fde90a0ce0f491f1R4).
When you have multiple vue-json-pretty
components on the page (say, created in a for loop), the click handler does not know which one is causing this event.
Consider this scenario: there are multiple json structures on the page, each one with same schema, but from different server. Whenever you click on a node in one of these, you should contact the respective server for more details on that node.
Currently it is not possible to do this, since the click-handler does not give back any information about the source component where the event is raised.
Also, is there anyway this vue-json-pretty
could hold some user data attached with each of its instance (at the component level at the top) that it will supply back to the click handler? For example, would like to associate the server url with each vue-json-pretty
instance, so that in the click handler we can:
<panel v-for="(server) in servers">
<vue-json-pretty :data="svcDetails[server]" @click="onDetailsClick" :attachData="server"></vue-json-pretty>
</panel>
onDetailsClick: function(path, value, attachedData) {
const server = attachedData; // get the attached data
axios.post(server, body: value); // use the currently selected value with attached data somehow
}
How is it possible to start with collapsed (closed) view of the JSON?
Right now it's by default expanded....
I want to add a copy
button next to vue-json-pretty
. Once the button clicked, I want to do the following:
a- Select all content of vue-json-pretty
(highlight all the json inside)
b- Copy the selected json in the clipboard.
Hi, I always use vue-json-pretty
component to render beautiful JSON data.
In my opinion, it should show line number of JSON data as option.
Is it interesting or useful? Please, let me know your ideas and comments.
Thank you,
World
When dealing with a big json, the CPU/MEM usage of chrome process will grow fast and the browser page will load slowly or even not display.
There is a sample json(size 1MB) in the attachment, copy and paste in the demo page can reproduce this condition. MEM usage of process will rich to nearly 2GB.
多选时候绑定v-model,点击多选框,v-model绑定的数组一直是空数组;点击内容可以正常选择
Hi,
Is there a way to add typescript support ?
I've tried npm install @types/vue-json-pretty but package doesn't exist.
Thanks,
best regards,
Alban
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.