ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਭਰਪੂਰ ਡਾਟਾ ਗਰਿੱਡ VUE.JS ਲਈ-VUE-TABLE-DYNAMIC

ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਭਰਪੂਰ ਡਾਟਾ ਗਰਿੱਡ Vue.js ਲਈ-vue-table-dynamic

vue- ਸਾਰਣੀ-ਗਤੀਸ਼ੀਲ

ਅੰਗਰੇਜ਼ੀ | ਚੀਨੀ

vue- ਸਾਰਣੀ-ਗਤੀਸ਼ੀਲ ਗਤੀਸ਼ੀਲ ਸਾਰਣੀ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਹਿੱਸਾ ਹੈ. ਇਹ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਡੇਟਾ ਬਦਲਾਵਾਂ ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ, ਅਤੇ ਰਨਟਾਈਮ ਦੇ ਅਧਾਰ ਤੇ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ.

ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਬਹੁ -ਚੋਣ
ਖੋਜ
ਕ੍ਰਮਬੱਧ ਕਰੋ
ਫਿਲਟਰ
ਪੰਨਾ
ਸੰਪਾਦਿਤ ਕਰੋ
ਬਾਰਡਰ
ਧਾਰੀ
ਹਾਈਲਾਈਟ
ਕਾਲਮ ਚੌੜਾਈ
ਸਿਰਲੇਖ ਦੀ ਸੰਰਚਨਾ ਕਰੋ
ਸਥਿਰ ਸਿਰਲੇਖ
ਸਥਿਰ ਕਾਲਮ

ਸਥਾਪਤ ਕਰੋ

$ npm install vue-table-dynamic --save

ਉਪਯੋਗਤਾ

ਆਯਾਤ

import VueTableDynamic from 'vue-table-dynamic'

ਰਜਿਸਟਰੇਸ਼ਨ

ਗਲੋਬਲ ਰਜਿਸਟਰੇਸ਼ਨ

Vue.use(VueTableDynamic)

ਸਥਾਨਕ ਰਜਿਸਟਰੇਸ਼ਨ

export default { components: { VueTableDynamic } }

ਮੁੱicਲੀ ਸਾਰਣੀ

ਸਾਰਣੀ ਦੀ ਮੁੱicਲੀ ਵਰਤੋਂ

ਬੁਨਿਆਦੀ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Cell-1', 'Cell-2', 'Cell-3'], ['Cell-4', 'Cell-5', 'Cell-6'], ['Cell-7', 'Cell-8', 'Cell-9'] ] } } }, components: { VueTableDynamic } }

ਬਾਰਡਰ

ਬਾਰਡਰਡ ਟੇਬਲ ਵਰਤੋਂ

border: true ਸਰਹੱਦ ਦੇ ਨਾਲ
border: false ਸਰਹੱਦ ਤੋਂ ਬਿਨਾਂ

ਸਰਹੱਦ

ਈਮੇਲ ਨਾਲ ਕੈਸ਼ ਐਪ ਖਾਤਾ ਬਣਾਓ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', border: true } } }, components: { VueTableDynamic } }

ਧਾਰੀ

ਧਾਰੀਦਾਰ ਕਤਾਰਾਂ

stripe: true ਧਾਰੀਦਾਰ
stripe: false ਬਿਨਾਂ ਪੱਟੀ ਵਾਲਾ

ਧਾਰੀ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'], [4, 'hf7y8c', '4rghjk', 'cgnhik'] ], header: 'row', border: true, stripe: true } } }, components: { VueTableDynamic } }

ਹਾਈਲਾਈਟ

ਹਾਈਲਾਈਟ ਕੀਤੀਆਂ ਕਤਾਰਾਂ/ਕਾਲਮ/ਸੈੱਲ

highlight: {row?:Array; column?:Array; cell?:Array;} ਉਜਾਗਰ ਕੀਤੀਆਂ ਕਤਾਰਾਂ, ਕਾਲਮਾਂ, ਸੈੱਲਾਂ ਦੀ ਸੰਰਚਨਾ ਕਰੋ. ਜਿਵੇ ਕੀ: {row: [1], column: [1], cell: [[-1, -1]]} ਜੇ ਨਕਾਰਾਤਮਕ ਹੈ, ਐਰੇ ਦੇ ਅੰਤ ਤੋਂ ਸਥਿਤੀ.
highlightedColor: string ਉਜਾਗਰ ਕੀਤੇ ਰੰਗਾਂ ਦੀ ਸੰਰਚਨਾ ਕਰੋ

ਹਾਈਲਾਈਟ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'], [4, 'hf7y8c', '4rghjk', 'cgnhik'] ], header: 'row', border: true, stripe: true, highlight: { column: [-2] }, highlightedColor: 'rgb(243, 235, 200)' } } }, components: { VueTableDynamic } }

ਬਹੁ -ਚੋਣ

ਕਈ ਕਤਾਰਾਂ ਚੁਣੋ

showCheck: boolean ਕਤਾਰਾਂ ਦਾ ਚੈਕਬਾਕਸ ਦਿਖਾਓ
getCheckedRowDatas: function ਸਾਰੀਆਂ ਮੌਜੂਦਾ ਚੁਣੀਆਂ ਗਈਆਂ ਕਤਾਰਾਂ ਲਈ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰੋ
setAllRowChecked: function(selected:boolean) ਸਾਰੀ ਚੋਣ ਟੌਗਲ ਕਰੋ
select: event ਵਰਤਮਾਨ ਵਿੱਚ ਚੁਣੀਆਂ/ਅਣਚੁਣੀਆਂ ਕਤਾਰਾਂ

ਚੈਕਬਾਕਸ

ਪ੍ਰਿੰਟਰ ਵਿੱਚ ਗਲਤੀ ਹੈ ਭਰਾ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', showCheck: true } } }, methods: { onSelect (isChecked, index, data) { console.log('onSelect: ', isChecked, index, data) console.log('Checked Data:', this.$refs.table.getCheckedRowDatas(true)) }, onSelectionChange (checkedDatas, checkedIndexs, checkedNum) { console.log('onSelectionChange: ', checkedDatas, checkedIndexs, checkedNum) } }, components: { VueTableDynamic } }

ਖੋਜ

ਕੀਵਰਡ ਦੁਆਰਾ ਕਤਾਰਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰੋ

enableSearch: boolean ਖੋਜ ਨੂੰ ਸਮਰੱਥ/ਅਯੋਗ ਕਰੋ
search: function(value:string) ਮੈਨੁਅਲ ਕਤਾਰ ਫਿਲਟਰਿੰਗ

ਖੋਜ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', enableSearch: true } } }, methods: { }, components: { VueTableDynamic } }

ਕ੍ਰਮਬੱਧ ਕਰੋ

ਨਿਰਧਾਰਤ ਕਾਲਮ ਡੇਟਾ ਦੇ ਅਧਾਰ ਤੇ ਕਤਾਰਾਂ ਨੂੰ ਕ੍ਰਮਬੱਧ ਕਰੋ

sort: Array ਐਰੇ ਮੈਂਬਰ ਕ੍ਰਮਬੱਧ ਕਾਲਮ ਇੰਡੈਕਸ ਹਨ. ਜਿਵੇ ਕੀ: [0, 1]

ਲੜੀਬੱਧ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', sort: [0, 1] } } }, methods: { }, components: { VueTableDynamic } }

ਫਿਲਟਰ

ਨਿਰਧਾਰਤ ਕਾਲਮ ਡੇਟਾ ਅਤੇ ਨਿਯਮ ਦੇ ਅਧਾਰ ਤੇ ਕਤਾਰਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰੋ

filter: Array<{column:number; content:Array; method:function;}> ਫਿਲਟਰ ਕਰਨ ਯੋਗ ਕਾਲਮ ਅਤੇ ਨਿਯਮ ਨਿਰਧਾਰਤ ਕਰੋ. ਜਿਵੇ ਕੀ: [{column: 0, content: [{text: '> 2', value: 2}], method: (value, cell) => { return cell.data > value }}]
| _+_ | ਕਾਲਮ ਇੰਡੈਕਸ
| _+_ | ਫਿਲਟਰ ਆਈਟਮਾਂ
| _+_ | ਫਿਲਟਰ ਨਿਯਮ.

ਫਿਲਟਰ

filter[].column:

ਪੰਨਾ

ਪੰਨੇ ਦੇ ਨਾਲ ਸਾਰਣੀ

filter[].content: filter[].method: ਪੰਨੇਕਰਨ ਨੂੰ ਸਮਰੱਥ/ਅਯੋਗ ਕਰੋ
import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Time'], [1, 'b3ba90', '9a3853', '2019-01-01 10:10'], [2, 'ec0b78', 'ecf03c', '2019-02-02 11:11'], [3, '7c95f7', 'fdf451', '2019-02-02 12:12'], [4, 'ba045d', '34fdgh', '2019-02-02 13:13'], [5, 'a8c325', '4678de', '2019-03-03 14:14'] ], header: 'row', filter: [{ column: 0, content: [{text: '> 2', value: 2}, {text: '> 4', value: 4}], method: (value, tableCell) => { return tableCell.data > value } }, { column: 3, content: [{text: '2019-01-01', value: '2019-01-01'}, {text: '2019-02-02', value: '2019-02-02'}], method: (value, tableCell) => { return String(tableCell.data).toLocaleLowerCase().includes(String(value).toLocaleLowerCase()) } }], } } }, methods: { }, components: { VueTableDynamic } } pagination: ਹਰੇਕ ਪੰਨੇ ਦੀ ਕਤਾਰ ਗਿਣਤੀ. ਮੂਲ: boolean
pageSize?: number ਪ੍ਰਤੀ ਪੰਨਾ ਕਤਾਰ ਗਿਣਤੀ ਦੇ ਵਿਕਲਪ. ਮੂਲ: 10

ਪੰਨਾ

pageSizes?:

ਸੰਪਾਦਿਤ ਕਰੋ

ਸੰਪਾਦਨ ਯੋਗ ਸਾਰਣੀ
ਸੰਪਾਦਨ ਲਈ ਕਤਾਰਾਂ/ਕਾਲਮਾਂ/ਸੈੱਲਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ

ਜਿੱਤ ਦਾ ਸਿੱਕਾ ਕਿੱਥੇ ਖਰੀਦਣਾ ਹੈ

Array [10, 20, 50, 100] ਸੰਪਾਦਨਯੋਗ ਕਤਾਰਾਂ, ਕਾਲਮਾਂ, ਸੈੱਲਾਂ ਦੀ ਸੰਰਚਨਾ ਕਰੋ. ਜਿਵੇ ਕੀ: import VueTableDynamic from 'vue-table-dynamic' const random = () => { return parseInt(Date.now() + Math.random() * 10000000).toString(16).slice(-6) } export default { name: 'Demo', data() { return { params: { data: [ ['Index', `Data1`, `Data2`, `Data3`] ], header: 'row', border: true, stripe: true, pagination: true, pageSize: 5, pageSizes: [5, 10, 20, 50] } } }, mounted () { for (let i = 0; i <100; i++) { this.params.data.push([i+1, `${random()}`, `${random()}`, `${random()}`]) } }, components: { VueTableDynamic } } . ਜੇ ਨਕਾਰਾਤਮਕ ਹੈ, ਐਰੇ ਦੇ ਅੰਤ ਤੋਂ ਸਥਿਤੀ.
edit: {row?:Array; column?:Array; cell?:Array;} ਸੰਪਾਦਨ ਤੋਂ ਬਾਅਦ ਟੇਬਲ ਡੇਟਾ ਬਦਲਿਆ ਗਿਆ, ਇਸ ਵਿਧੀ ਦੁਆਰਾ ਨਵੀਨਤਮ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰੋ.
{row: [1], column: [1], cell: [[-1, -1]]} getData: ਸੈੱਲ ਡਾਟਾ ਬਦਲਿਆ ਇਵੈਂਟ
function() cell-change: ਸਾਰੇ ਸੈੱਲਾਂ ਨੂੰ ਸੰਪਾਦਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ
ਜੇ | _+_ | ਹੈ event , ਪਹਿਲੀ ਕਤਾਰ ਸੰਪਾਦਨਯੋਗ ਨਹੀਂ ਹੈ

ਸੋਧ

edit:

ਕਾਲਮ ਦੀ ਚੌੜਾਈ

ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਦਾ ਸੰਰੂਪਣ ਕਰੋ

{row: 'all'} header ਜਿਵੇ ਕੀ: 'row'
| _+_ | ਕਾਲਮ ਦਾ ਸੂਚਕਾਂਕ
| _+_ | ਕਾਲਮ ਦੀ ਚੌੜਾਈ. ਪਿਕਸਲ ਮੁੱਲ ਲਈ ਸੰਖਿਆ, ਪ੍ਰਤੀਸ਼ਤ ਲਈ ਸਤਰ

ਚੌੜਾਈ

 import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', edit: { row: [1], column: [1], cell: [[-1, -1]] } } } }, methods: { onCellChange (rowIndex, columnIndex, data) { console.log('onCellChange: ', rowIndex, columnIndex, data) console.log('table data: ', this.$refs.table.getData()) } }, components: { VueTableDynamic } }

ਸਿਰਲੇਖ ਸੰਰਚਨਾ

columnWidth: Array ਪਹਿਲੀ ਕਤਾਰ ਸਿਰਲੇਖ ਹੈ
[{column: 0, width: 60}, {column: 3, width: '15%'}] columnWidth[].column ਪਹਿਲਾ ਕਾਲਮ ਸਿਰਲੇਖ ਹੈ
columnWidth[].width import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', border: true, columnWidth: [{column: 0, width: 60}, {column: 3, width: '15%'}], } } }, components: { VueTableDynamic } } ਕੋਈ ਸਿਰਲੇਖ ਨਹੀਂ

ਸਿਰਲੇਖ

header:

ਸਥਿਰ ਸਿਰਲੇਖ

ਟੇਬਲ ਦੀ ਉਚਾਈ ਦੀ ਸੰਰਚਨਾ ਦੁਆਰਾ ਸਥਿਰ ਸਿਰਲੇਖ

row header: ਟੇਬਲ ਦੀ ਉਚਾਈ
ਜਦੋਂ ਦਾ ਮੁੱਲ | _+_ | ਨਹੀ ਹੈ column , ਪਹਿਲੀ ਕਤਾਰ ਇੱਕ ਸਧਾਰਨ ਕਤਾਰ ਹੈ, ਸਥਿਰ ਨਹੀਂ ਹੋਵੇਗੀ

ਉਚਾਈ

header:

ਸਥਿਰ ਕਾਲਮ

ਸੰਰਚਨਾ ਦੁਆਰਾ ਸਥਿਰ ਕਾਲਮ | _+_ |

'' import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'column', border: true, columnWidth: [{column: 0, width: 60}] } } }, components: { VueTableDynamic } } ਸਥਿਰ ਕਾਲਮ
| _+_ | ਤੋਂ ਘੱਟ ਜਾਂ ਇਸਦੇ ਬਰਾਬਰ ਸੂਚਕਾਂਕ ਵਾਲੇ ਕਾਲਮ ਸਥਿਰ ਦੇ ਰੂਪ ਵਿੱਚ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾਵੇਗਾ. ਜਿਵੇਂ ਕਿ | _+_ |, ਪਹਿਲਾ ਕਾਲਮ ਅਤੇ ਦੂਜਾ ਕਾਲਮ ਸਥਿਰ ਕੀਤਾ ਜਾਵੇਗਾ
ਸਥਿਰ ਕਾਲਮਾਂ ਲਈ, ਕਾਲਮ ਦੀ ਚੌੜਾਈ (ਪਿਕਸਲ ਮੁੱਲ) ਨੂੰ | _+_ | ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ
ਮਲਟੀ ਚੈਕ ਬਾਕਸ ਫਿਕਸਡ ਕਾਲਮ ਦੀ ਰੇਂਜ ਵਿੱਚ ਨਹੀਂ ਹੈ, ਇਹ ਹਮੇਸ਼ਾਂ ਪਹਿਲੇ ਕਾਲਮ ਦੇ ਸਾਹਮਣੇ ਹੁੰਦਾ ਹੈ
ਜੇ ਮੱਧ ਵਿੱਚ ਇੱਕ ਕਾਲਮ ਨੂੰ ਠੀਕ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਤਾਂ params.data ਵਿੱਚ ਕਾਲਮ ਡੇਟਾ ਨੂੰ ਕਾਲਮ 0 ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰੋ

ਸਥਿਰ

height:

ਸਥਿਰ ਸਿਰਲੇਖ ਅਤੇ ਕਾਲਮ

| _+_ | ਦੁਆਰਾ ਸਥਿਰ ਸਿਰਲੇਖ. | _+_ | ਦੁਆਰਾ ਸਥਿਰ ਕਾਲਮ

ਉਚਾਈ ਅਤੇ ਸਥਿਰ

number

ਅੱਗ

ਗੁਣ

| _+_ | ਉਹ ਵਸਤੂ ਹੈ ਜਿਸ ਨੂੰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਭੇਜਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ | _+_ |
ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਆਈਟਮਾਂ | _+_ | ਦੀਆਂ ਸਾਰੀਆਂ ਚਾਈਲਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਵਸਤੂ
| _+_ | ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਲੋੜ ਹੈ, ਦੂਸਰੇ ਵਿਕਲਪਿਕ ਹਨ

ਨਾਮ	ਵਰਣਨ	ਕਿਸਮ	ਵਿਕਲਪਿਕ ਮੁੱਲ	ਮੂਲ ਮੁੱਲ
`header`	ਸਰੋਤ ਡਾਟਾ	`'row'`	-	import VueTableDynamic from 'vue-table-dynamic' const random = () => { return parseInt(Date.now() + Math.random() * 10000000).toString(16).slice(-6) } export default { name: 'Demo', data() { return { params: { data: [ ['Index', `Data1`, `Data2`, `Data3`] ], header: 'row', border: true, stripe: true, height: 180 } } }, mounted () { for (let i = 0; i <12; i++) { this.params.data.push([i+1, `${random()}`, `${random()}`, `${random()}`]) } }, components: { VueTableDynamic } }
`fixed`	ਸਿਰਲੇਖ ਦੀ ਸੰਰਚਨਾ ਕਰੋ	`fixed:`	\| _+_ \|: ਪਹਿਲੀ ਕਤਾਰ ਸਿਰਲੇਖ ਹੈ; \| _+_ \|: ਪਹਿਲਾ ਕਾਲਮ ਸਿਰਲੇਖ ਹੈ; \| _+_ \|: ਕੋਈ ਸਿਰਲੇਖ ਨਹੀਂ	`number`
`fixed`	ਬਾਰਡਰ ਦੇ ਨਾਲ ਟੇਬਲ	`fixed: 1`	`columnwidth` / import VueTableDynamic from 'vue-table-dynamic' const random = () => { return parseInt(Date.now() + Math.random() * 10000000).toString(16).slice(-6) } export default { name: 'Demo', data() { return { params: { data: [ ['Index', `Data1`, `Data2`, `Data3`] ], header: 'row', border: true, stripe: true, columnWidth: [{column: 0, width: 100}, {column: 2, width: 400}], fixed: 0 } } }, mounted () { for (let i = 0; i <5; i++) { this.params.data.push([i+1, `${random()}`, `${random()}`, `${random()}`]) } }, components: { VueTableDynamic } }	`height`
`fixed`	ਧਾਰੀਦਾਰ ਮੇਜ਼	import VueTableDynamic from 'vue-table-dynamic' const random = () => { return parseInt(Date.now() + Math.random() * 10000000).toString(16).slice(-6) } export default { name: 'Demo', data() { return { params: { data: [ ['Index', `Data1`, `Data2`, `Data3`] ], header: 'row', border: true, stripe: true, columnWidth: [{column: 0, width: 100}, {column: 2, width: 400}], height: 180, fixed: 0 } } }, mounted () { for (let i = 0; i <10; i++) { this.params.data.push([i+1, `${random()}`, `${random()}`, `${random()}`]) } }, components: { VueTableDynamic } }	`params` / `props`	`params`
`data`	ਉਜਾਗਰ ਕੀਤੀਆਂ ਕਤਾਰਾਂ, ਕਾਲਮਾਂ, ਸੈੱਲਾਂ ਦੀ ਸੰਰਚਨਾ ਕਰੋ. ਜਿਵੇਂ: {ਕਤਾਰ: \| _+_ \|, ਕਾਲਮ: \| _+_ \|, ਸੈੱਲ: \| _+_ \|}. ਜੇ ਨਕਾਰਾਤਮਕ ਹੈ, ਐਰੇ ਦੇ ਅੰਤ ਤੋਂ ਸਥਿਤੀ.	{ਕਤਾਰ?: ਐਰੇ; ਕਾਲਮ?: ਐਰੇ; ਸੈੱਲ?: ਐਰੇ;}	-	`data`
`Array`	ਉਜਾਗਰ ਕੀਤੇ ਰੰਗ	`[]`	-	`header`
`string`	ਟੇਬਲ ਸੈੱਲ ਦੀ ਸ਼ਬਦ-ਸਮੇਟਣ ਸ਼ੈਲੀ	`row`	`column`	`''`
`''`	ਟੇਬਲ ਸੈੱਲ ਦੀ ਵ੍ਹਾਈਟ-ਸਪੇਸ ਸ਼ੈਲੀ	`border`	`boolean`	`true`
`false`	ਟੇਬਲ ਸੈੱਲ ਦੀ ਟੈਕਸਟ-ਓਵਰਫਲੋ ਸ਼ੈਲੀ	`false`	`stripe`	`boolean`
`true`	ਕਤਾਰਾਂ ਦਾ ਚੈਕਬਾਕਸ ਦਿਖਾਓ. ਕੇਵਲ ਉਦੋਂ ਜਦੋਂ \| _+_ \| ਹੈ \| _+_ \|, ਪਹਿਲੀ ਕਤਾਰ ਦਾ ਪਹਿਲਾ ਸੈੱਲ ਸਾਰੀਆਂ ਕਤਾਰਾਂ ਦਾ ਚੈਕਬੌਕਸ ਹੈ. ਨਹੀਂ ਤਾਂ, ਪਹਿਲਾ ਸੈਲ ਪਹਿਲੀ ਕਤਾਰ ਦਾ ਚੈਕਬਾਕਸ ਹੈ	`false`	`false` / `highlight`	`[1]`
`[1]`	ਖੋਜ ਨੂੰ ਸਮਰੱਥ/ਅਯੋਗ ਕਰੋ, ਕੀਵਰਡ ਦੁਆਰਾ ਕਤਾਰਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰੋ	`[[-1, -1]]`	`{}` / `highlightedColor`	`string`
`#EBEBEF`	ਟੇਬਲ ਦੀ ਘੱਟੋ ਘੱਟ ਚੌੜਾਈ	`wordWrap`	-	`string`
`normal/break-word`	ਸਾਰਣੀ ਦੀ ਅਧਿਕਤਮ ਚੌੜਾਈ	`normal`	-	`whiteSpace`
`string`	ਟੇਬਲ ਦੀ ਉਚਾਈ. ਟੇਬਲ ਦੀ ਉਚਾਈ ਦੀ ਸੰਰਚਨਾ ਦੁਆਰਾ ਸਥਿਰ ਸਿਰਲੇਖ	`nowrap/normal/pre/pre-wrap/pre-line`	-	-
`nowrap`	ਸਥਿਰ ਕਾਲਮ	`textOverflow`	`string`
`clip/ellipsis`	ਸਿਰਲੇਖ ਦੀ ਉਚਾਈ	`clip`	`showCheck`	`header`
`'row'`	ਕਤਾਰ ਦੀ ਉਚਾਈ	`boolean`	`true`	`false`
`false`	ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਦਾ ਸੰਰੂਪਣ ਕਰੋ	ਐਰੇ	-	-
`enableSearch`	ਨਿਰਧਾਰਤ ਕਾਲਮ ਡੇਟਾ ਦੇ ਅਧਾਰ ਤੇ ਕਤਾਰਾਂ ਨੂੰ ਕ੍ਰਮਬੱਧ ਕਰੋ	`boolean`	-	-
`true`	ਨਿਰਧਾਰਤ ਕਾਲਮ ਡੇਟਾ ਅਤੇ ਨਿਯਮ ਦੇ ਅਧਾਰ ਤੇ ਕਤਾਰਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰੋ. \| _+_ \|: ਇੰਡੈਕਸ; \| _+_ \|: ਫਿਲਟਰ ਆਈਟਮਾਂ; \| _+_ \| ਫਿਲਟਰ ਨਿਯਮ.	ਐਰੇ	-	-
`false`	ਸੰਪਾਦਨ ਲਈ ਕਤਾਰਾਂ/ਕਾਲਮਾਂ/ਸੈੱਲਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨਾ. ਸੰਪਾਦਨ ਦੇ ਬਾਅਦ ਟੇਬਲ ਡੇਟਾ ਬਦਲਿਆ ਗਿਆ, \| _+_ \| ਦੁਆਰਾ ਨਵੀਨਤਮ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰੋ ੰਗ	{ਕਤਾਰ?: ਐਰੇ; ਕਾਲਮ?: ਐਰੇ; ਸੈੱਲ?: ਐਰੇ;}	-	-
`false`	ਪੰਨੇ ਦੇ ਨਾਲ ਟੇਬਲ	`minWidth`	`number` / `100`	`maxWidth`
`number`	ਹਰੇਕ ਪੰਨੇ ਦੀ ਕਤਾਰ ਗਿਣਤੀ	`10000`	-	`height`
`number`	ਪ੍ਰਤੀ ਪੰਨਾ ਕਤਾਰ ਗਿਣਤੀ ਦੇ ਵਿਕਲਪ	`fixed`	-	`number`
`>= 0`	ਸਕ੍ਰੌਲ ਬਾਰ ਦਾ ਪ੍ਰਦਰਸ਼ਨ	`headerHeight`	`number`	`>= 24`

ੰਗ

ਵਿਧੀ ਦਾ ਨਾਮ	ਵਰਣਨ	ਮਾਪਦੰਡ	ਵਾਪਸੀ
`30`	ਸੰਪਾਦਨ ਤੋਂ ਬਾਅਦ ਟੇਬਲ ਡੇਟਾ ਬਦਲਿਆ ਗਿਆ, ਇਸ ਵਿਧੀ ਦੁਆਰਾ ਨਵੀਨਤਮ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰੋ	-	`rowHeight`
`number`	ਸਾਰੀਆਂ ਮੌਜੂਦਾ ਚੁਣੀਆਂ ਗਈਆਂ ਕਤਾਰਾਂ ਲਈ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰੋ	\| _+_ \| ਜਦੋਂ ਪਹਿਲੀ ਕਤਾਰ ਸਿਰਲੇਖ ਹੋਵੇ ਤਾਂ ਹੈਡਰ ਕਤਾਰ ਸ਼ਾਮਲ ਕਰੋ ， ਡਿਫੌਲਟ \| _+_ \| ਹੈ	`>= 24`
`30`	ਇੰਡੈਕਸ ਦੁਆਰਾ ਰੋ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰੋ	\| _+_ \| ਇੰਡੈਕਸ ； \| _+_ \| ਕੀ ਇੰਡੈਕਸ ਕ੍ਰਮਬੱਧ ਕੀਤਾ ਗਿਆ ਹੈ ， ਡਿਫੌਲਟ \| _+_ \| ਹੈ	`columnWidth`
`sort`	ਮੈਨੁਅਲ ਕਤਾਰ ਫਿਲਟਰਿੰਗ	\| _+_ \| ਕੀਵਰਡ	-
`Array`	ਸਾਫ ਖੋਜ, ਸਾਰੀਆਂ ਕਤਾਰਾਂ ਦਿਖਾਓ	-	-
`filter`	ਨਿਸ਼ਾਨੇ ਵਾਲੇ ਪੰਨੇ ਤੇ ਸਵਿਚ ਕਰੋ, ਜਦੋਂ ਪੰਨਾਬੰਦੀ ਯੋਗ ਹੋਵੇ	\| _+_ \| ਪੰਨਾ ਬਦਲਣ ਲਈ	-

ਸਮਾਗਮ

ਘਟਨਾ ਦਾ ਨਾਮ	ਵਰਣਨ	ਮਾਪਦੰਡ
`column`	ਇੱਕ ਕਤਾਰ ਦੀ ਚੋਣ ਕਰਦੇ ਸਮੇਂ ਘਟਨਾ	`content`; `method`; `edit`
`getData`	ਟੇਬਲ ਸਿਰਲੇਖ ਵਿੱਚ ਚੈਕਬੌਕਸ ਤੇ ਕਲਿਕ ਕਰਨ ਵੇਲੇ ਘਟਨਾ	`pagination`
`boolean`	ਇੱਕ ਕਤਾਰ 'ਤੇ ਕਲਿਕ ਕਰਨ ਵੇਲੇ ਇਵੈਂਟ	`true`; `false`
`false`	ਸੈੱਲ ਤੇ ਕਲਿਕ ਕਰਨ ਵੇਲੇ ਘਟਨਾ	`pageSize`; `number`; `10`
`pageSizes`	ਸੈੱਲ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਦੇ ਸਮੇਂ ਘਟਨਾ	`Array`; `[10, 20, 50, 100]`; `scrollbar`
`string`	ਲੜੀਬੱਧ ਕਰਨ ਵੇਲੇ ਘਟਨਾ	`show/hover/hidden`; `show`

ਵੇਰਵੇ ਡਾ Downloadਨਲੋਡ ਕਰੋ:

ਲੇਖਕ: TheoXiong

ਤੁਸੀਂ ਹੀਲੀਅਮ ਕ੍ਰਿਪਟੋ ਕਿੱਥੋਂ ਖਰੀਦ ਸਕਦੇ ਹੋ

ਲਾਈਵ ਡੈਮੋ: https://theoxiong.github.io/vue-table-dynamic/

GitHub: https://github.com/TheoXiong/vue-table-dynamic

#vuejs #javascript #vue-js

ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਭਰਪੂਰ ਡਾਟਾ ਗਰਿੱਡ Vue.js ਲਈ-vue-table-dynamic

ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਭਰਪੂਰ ਡਾਟਾ ਗਰਿੱਡ Vue.js ਲਈ-vue-table-dynamic

vue- ਸਾਰਣੀ-ਗਤੀਸ਼ੀਲ

ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਸਥਾਪਤ ਕਰੋ

ਉਪਯੋਗਤਾ

ਆਯਾਤ

ਰਜਿਸਟਰੇਸ਼ਨ

ਗਲੋਬਲ ਰਜਿਸਟਰੇਸ਼ਨ

ਸਥਾਨਕ ਰਜਿਸਟਰੇਸ਼ਨ

ਮੁੱicਲੀ ਸਾਰਣੀ

ਬਾਰਡਰ

ਧਾਰੀ

ਹਾਈਲਾਈਟ

ਬਹੁ -ਚੋਣ

ਖੋਜ

ਕ੍ਰਮਬੱਧ ਕਰੋ

ਫਿਲਟਰ

ਪੰਨਾ

ਸੰਪਾਦਿਤ ਕਰੋ

ਕਾਲਮ ਦੀ ਚੌੜਾਈ

ਸਿਰਲੇਖ ਸੰਰਚਨਾ

ਸਥਿਰ ਸਿਰਲੇਖ

ਸਥਿਰ ਕਾਲਮ

ਸਥਿਰ ਸਿਰਲੇਖ ਅਤੇ ਕਾਲਮ

ਅੱਗ

ਗੁਣ

ੰਗ

ਸਮਾਗਮ

ਵੇਰਵੇ ਡਾ Downloadਨਲੋਡ ਕਰੋ:

ਇਹ ਵੀ ਵੇਖੋ:

ਨਵੀਆਂ ਚੀਜ਼ਾਂ

ਸਭ ਤੋਂ ਵੱਧ ਪੜ੍ਹਨਯੋਗ

ਸੰਪਾਦਕ ਦੇ ਚੋਣ