njleonzhang / vue-data-tables Goto Github PK
View Code? Open in Web Editor NEWA simple, customizable and pageable table with SSR support, based on vue2 and element-ui
Home Page: https://njleonzhang.github.io/vue-data-tables
License: MIT License
A simple, customizable and pageable table with SSR support, based on vue2 and element-ui
Home Page: https://njleonzhang.github.io/vue-data-tables
License: MIT License
I base on Meteor + Vue-Meteor
.
Get warning
"!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-739f43f1!../../node_modules/sass-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./DataTables.vue"
in /Users/theara/Desktop/meteor-app/vue-element/node_modules/vue-data-tables/dist/data-tables.js (web.browser)
"!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-5ef578ba!../../node_modules/sass-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./ScCheckboxGroup.vue"
in /Users/theara/Desktop/meteor-app/vue-element/node_modules/vue-data-tables/dist/data-tables.js (web.browser)
If you notice problems related to these missing modules, consider running:
meteor npm install --save !!..
=> Started your app.
=> App running at: http://localhost:3000/
But it work fine
Please detail how to use attr of <el-table-column>
such as prop, label, sortable....
.
Or check on Element UI
???
Hello!
I installed your module and I'm using it on vue2. I was able to add the table and fill it with data, but I can't seem to make the search work. In the documentation says that the default value of props
is All
which I assume means it searches on every column? If that's the case, it's not working for me.
I tried passing an array with my column props
but it's not working either. Right now I have
<data-tables
:data='table.rows'
:search-def='{ placeholder: "Search..." }'
action-col-width='50'
action-col-label='Actions'>
<el-table-column
v-for="column in table.columns"
:prop="column.id"
:label="column.label"
:sortable="column.sortable || true">
</el-table-column>
</data-tables>
And my table object looks like this:
{
columns: [
{
id: 'name',
label: 'Brand name'
},
{
id: 'modules',
label: 'Active modules',
sortable: false
},
{
id: 'employees',
label: 'Employees'
}
],
rows: [
{
id: 1,
name: 'Starbucks',
modules: '[2,3,4]',
employees: 20
},
{
id: 2,
name: 'Reebook',
modules: '[1]',
employees: 5
},
{
id: 3,
name: 'Havanna',
modules: '[2,3]',
employees: 100
}
]
}
But when I search, nothing happens and nothing gets filtered. No error on console either :(
Thanks for your time and hope you can help me out here!
How to display the picture? Thank you
How can I modify the output of data in a column?
Example 1: I'm getting a url from the API and I would like make it a full working link:
<a href="url from api">something</a>
Example 2: I receive the first name and last name as seperate values. I would like to join them to first name + last name and display them in one column
Have any plan for sever data?
Could I use transition
when insert/update/remove row?
如题,自己加了个时间筛选成功了,下拉没加出效果,尴尬,第一次用
Hi guy,
First , thanks for your work , it is very good.
I have one problem with data table when I update a row in the table.
My "data table" is a getter object in vuex and when I use the mutation "UPDATE_TABLE" to update one row in the data table object , the table render does not take into account the update.
I checked my data Table and it is well updated.
After update, Curiously , when I click on filters on my table, the table render take into account the update.
Can you see this ?
Thank you.
Hi @njleonzhang
I have a problem with vue-data-tables. To demonstrate my issue I wanted to create a JS Bin.
Did I do something wrong or isn't it possible to use vue-data-tables without module bundler?
我在el-table-column 中用了
:formatter='dateFormater'
去转换时间的显示格式,
我发现search box会用el-table-column
内prop
的值(e.g. 2017-07-14T09:17:18.824Z) 作为搜索条件, 而不是用转换後的值(e.g. 2017-07-14 05:17 PM )
请问这个问题可以怎样解决?
谢谢?
Hello, how can I set ":total" value for pagination. In the src pagination total is computed value, but is there any way to change it?
thx =)
建议actions(which belongs to table)按钮支持el-button的type属性,而不是默认不可修改的type='primary'
just like row-actions(which belongs to row)
If I don't need to operate, how can I cancel the last column
I want to set different actions to different rows based on the data in the row.
But right now it seems impossible to me.
Any ideas on how to achieve that?
Is there a way to trigger the pagination event current-change?
Thanks
表格可以添加多选列,但是没有监听selection-change事件,这样如果要获取多选的结果就没办法了
Please, make it possible to pass a placeholder to the search input item. Something like this for example:
getSearchDef() {
return {
offset: 12,
placeholder: 'my placeholder text',
props: ['title', 'author'], // can be string or Array
};
},
It is important to provide an online sample to reproduce the issue. Template for online reproducing
provide more detailed introduction to the issue itself and why it is relevant
If i want to short my table, i get this warning to the console:
[Vue warn]: You may have an infinite update loop in a component render function.
(found in component )
I checked your demo, and the 1st table do the same, the others don't.
I base on Meteor
.
I have problem with a big data that I get from Mongo.
Support server side or a big data?
I had el-table-column with sort-method works fine in el-table,
after moved into data-tables it's not called.
I just want to use row status class via :row-class-name
attribute but it's not supported in on <data-tables>
element but works with <el-table>
.
So, I think there is no supported <el-table>
attributes at all.
Hi,
How to do server side processing for search and filtering?
On every 2nd row hover, the background didn't change, because the default color's css selector is stronger.
This will override:
.el-table--striped .el-table__body tr:nth-child(2n) td { background: #FAFAFA; }
this:
.el-table--enable-row-hover tr:hover>td { background-color: #eef1f6; }
Possible solution:
.el-table--enable-row-hover .el-table__body tr:hover>td { background-color: #eef1f6; }
Hi, thanks for the awesome component!
I would like to disable pagination in some cases. I would really like to have something like has-pagination
property.
Would you mind a PR from me with this feature?
There is a way to use default filters function to format table contents? The ":formatter" function is not a goog way for many cases.
比如,从别的地方,传过来一个 {value:'未解决'},我想将value这个字段,作为表格的筛选条件,有接口可以调用吗? 麻烦啦
Is there a way to make the search NOT case sensitive?
Please make it possible to fix the action column with the Elements UI fixed
prop.
Can I use the element's "default-sort" property in a data-tables?
这个控件,是否存在一个bug?
例子中是写死的,如果我要异步拉取选项会怎样?
通过试验,写死的可以出现这个控件,但是异步之后没有任何显示
问题原因:checkbox-filter-def属性的变化没有让组件更新,这个属性的逻辑处理是否写在mounted钩子里?
如果是,这可能是问题出现的原因,可以使用深度的watch的再次执行该属性的逻辑
感谢你的贡献,data-tables很美观,目前看起来也很好用。
我在使用中遇到点问题,希望能帮我解答下
如题
1、我想在点击某单元格时能通过触发方法,获取该单元格内容,或者说将该单元格修改为input 状态,该如何办到?
2、在某些情况下,我并不想action-col内的按钮显示,我该如何操作?
3、点击某个按钮之后,能否在table最下方或者最上方添加一行均为input 单元格的内容列?
Sorry putting this in issues. Didn't find where to ask for this help.
I'm using lib on my project a couldn't figure how to do something.
Please how do a v-if so it will show a row on depending a condition. I have look a your get start but couldn't find a solution. please can you just give a link jsfiddle.
Thanks. close this only if you have a solution to it.
在使用中遇到一些问题,由于我有一些数据也是动态算出来的,请问一下比如 innerCheckboxFilterDef 这个属性为什么不改用计算属性,而在created 的时候就定义好?
不知道大佬发现没有,<el-table-column>
width属性有BUG,无论设置什么值,都会变的很大,不知道是不是我使用的方式不对?
Could search with format date field
?
If I try to add any options to datatable. I get this error:
Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name.
This does not work. I get the above error:
<template>
<data-tables :data='tableData',
:has-action-col='false'>
This works:
<template>
<data-tables :data='tableData'>
Like I said I am not able to add any options at all.
Thanks for this excellent component.
Hi ,
I use "filter-method" and "filters" attributes on "el-table-column" component with pagination on my table.
Can I filter on ALL rows ( all the pages) instead of rows on the current page ?
Indeed filter-method is called only for rows on the current page...
Thanks
服务端分页如何设置总条数和获取当前页号,当前每页数呢
I have successfully render my table but there are chinese characters on it. Please how can I remove them
This is occurring at the level of pagination
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.