Comments (6)
@yuriymarad I am added clearChecked
to return. So, you can call the component's method on v1.3.6
from vue3-table-lite.
Hi, @yuriymarad
Can you give me more details?
Because checked always be auto clear after page changed.
I am trie below code to custom pagination to change pages and it's auto clear
<template>
<select v-model="table.page">
<option :value="1">1</option>
<option :value="2">2</option>
</select>
<table-lite
:hasCheckbox="true"
:is-loading="table.isLoading"
:columns="table.columns"
:rows="table.rows"
:total="table.totalRecordCount"
:sortable="table.sortable"
:messages="table.messages"
:page="table.page"
@do-search="doSearch"
@is-finished="table.isLoading = false"
@return-checked-rows="getCheckedRows"
></table-lite>
</template>
<script>
import { defineComponent, reactive } from "vue";
import TableLite from "vue3-table-lite";
// Fake Data for 'asc' sortable
const sampleData1 = (offst, limit) => {
offst = offst + 1;
let data = [];
for (let i = offst; i <= limit; i++) {
data.push({
id: i,
name: "TEST" + i,
email: "test" + i + "@example.com",
});
}
return data;
};
// Fake Data for 'desc' sortable
const sampleData2 = (offst, limit) => {
let data = [];
for (let i = limit; i > offst; i--) {
data.push({
id: i,
name: "TEST" + i,
email: "test" + i + "@example.com",
});
}
return data;
};
export default defineComponent({
name: "App",
components: { TableLite },
setup() {
// Table config
const table = reactive({
isLoading: false,
columns: [
{
label: "ID",
field: "id",
width: "3%",
sortable: true,
isKey: true,
},
{
label: "Name",
field: "name",
width: "10%",
sortable: true,
},
{
label: "Email",
field: "email",
width: "15%",
sortable: true,
},
],
rows: [],
totalRecordCount: 0,
sortable: {
order: "id",
sort: "asc",
},
page: 1,
});
/**
* Search Event
*/
const doSearch = (offset, limit, order, sort) => {
table.isLoading = true;
setTimeout(() => {
table.isReSearch = offset == undefined ? true : false;
if (offset >= 10 || limit >= 20) {
limit = 20;
}
if (sort == "asc") {
table.rows = sampleData1(offset, limit);
} else {
table.rows = sampleData2(offset, limit);
}
table.totalRecordCount = 20;
table.sortable.order = order;
table.sortable.sort = sort;
}, 600);
};
// First get data
doSearch(0, 10, "id", "asc");
const getCheckedRows = (rowsKey) => {
console.log(rowsKey);
};
return {
table,
doSearch,
getCheckedRows,
};
},
});
</script>
from vue3-table-lite.
Hi @linmasahiro , thanks for the answer.
Well in our case we do not use :page="table.page"
that will trigger watcher and set isChecked.value = []
.
Pagination is completely custom and we are re-populating table with new set of data from request to backend when page is changed (in your component the page itself does not change).
In this specific case checkboxes are not unticked.
I'm wondering if it makes sense to do so (I mean add 'return clearChecked') in this case, as it's likely not what you intended for your component to do.
Nevertheless, I don't see any harm in having the ability to clear checkboxes.
from vue3-table-lite.
Hi, @yuriymarad
OK, I will be add it on next version, but please let me confirm again.
You mean you want an event to clear all checked, not return all checked state after clear, right?
from vue3-table-lite.
@linmasahiro thanks a lot!
To clear. I believe it would be good to clear and emit "all checked" state, identical that you have now:
const clearChecked = () => {
isChecked.value = [];
rowCheckbox.value.forEach((val) => {
if (val && val.checked) {
val.checked = false;
}
});
emit("return-checked-rows", isChecked.value);
};
from vue3-table-lite.
@linmasahiro thanks a lot! It looks perfect :)
from vue3-table-lite.
Related Issues (20)
- Sortable function doesn't work with grouping key HOT 2
- Links under slot mode stopped working in 1.3.2 HOT 1
- checking rows doesn't work in 1.3.2 and 1.3.3 HOT 1
- Return duplicated value on「return-checked-rows」event HOT 1
- click event not handled in tableLoadingFinish function HOT 2
- Static mode pagination not working as expected HOT 3
- Is it possible to add 'return clearChecked' if 'hasCheckbox'?
- Bug when dynamically showing checkboxes HOT 1
- Grouping with toggle like a treeview inside table ? HOT 4
- [OTHERS] Call a Function inside of display property for a button HOT 12
- Unchecking row returns old value HOT 5
- Examples not compatible with latest version of vue3 and node18 HOT 1
- Allow HTML in header HOT 4
- Vertical highlighting on mouse hover HOT 3
- has-checkbox and is-fixed-first-column turned on, only checkbox header stays when table scrolls horizontally. HOT 3
- checked items not being cleared HOT 6
- Page selection list too long HOT 1
- [Vue warn]: Hydration node mismatch HOT 5
- Hero text is visible on the side nav HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue3-table-lite.