@komtek/el-grid
Version:
A Vue.js component which combines form, table, pagination components from Element UI.
180 lines (165 loc) • 4.35 kB
HTML
<meta charset="utf-8" />
<title>ElGrid Demo</title>
<head>
<link rel="stylesheet" href="../dist/el-grid.css" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-grid
:loading="loading"
type="local"
:data="items"
:columns="columns"
:form-options="formOptions"
:page-sizes="[5, 10, 25]"
>
<header slot="grid-header" class="padding-10">
<i class="header-icon"></i>
</header>
<div slot="isActive" slot-scope="row">
<el-checkbox v-model="row.isActive" />
</div>
<div slot="controls" slot-scope="row">
<div class="d-flex justify-content-between">
<button-action @handler="editItem(row)"></button-action>
<button-delete @handler="deleteItem(row)"></button-delete>
</div>
</div>
</el-grid>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../dist/el-grid.umd.js"></script>
<script>
let items = [
{
id: '5ee22847a8853e519a08ec72',
isActive: true,
age: 26,
name: 'Griffith Herrera',
gender: 'male',
company: 'VELITY',
email: 'griffithherrera@velity.com',
phone: '+1 (851) 530-2004',
friends: [
{
id: 0,
name: 'Amanda Ewing'
},
{
id: 1,
name: 'Myrna Zamora'
},
{
id: 2,
name: 'Fanny Cummings'
}
],
favoriteFruit: 'strawberry'
},
{
id: '5ee2284767b38513cfd15c76',
isActive: true,
age: 21,
name: 'Cortez Lott',
gender: 'male',
company: 'MANTRIX',
email: 'cortezlott@mantrix.com',
phone: '+1 (996) 585-3820',
friends: [
{
id: 0,
name: 'Stark Stanton'
},
{
id: 1,
name: 'Burch York'
},
{
id: 2,
name: 'Ruiz Maynard'
}
],
favoriteFruit: 'banana'
}
];
Vue.component('el-grid', ElGrid.default.ElGrid);
Vue.component('button-action', ElGrid.default.ButtonAction);
Vue.component('button-delete', ElGrid.default.ButtonDelete);
new Vue({
el: '#app',
data() {
return {
loading: true,
items
};
},
computed: {
columns() {
return [
{
slotName: 'isActive',
sortable: false,
align: 'center',
width: 75
},
{
prop: 'name',
label: 'Name',
width: 300
},
{
prop: 'age',
label: 'Age',
width: 100
},
{
prop: 'email',
label: 'Email',
width: 250
},
{
prop: 'phone',
label: 'Phone',
width: 200
},
{
prop: 'friends',
label: 'Friends',
render: ({ friends }) => friends.map(x => x.name).join(', ')
},
{
slotName: 'controls',
sortable: false,
align: 'center',
width: 75
}
];
},
formOptions() {
return {
forms: [
{ prop: 'name', placeholder: 'Name', width: 100 },
{ prop: 'mail', placeholder: 'Email', width: '200px' }
]
};
}
},
methods: {
editItem({ name }, index) {
alert(`Edit employee with name: ${name}`);
},
deleteItem({ id }) {
this.items.splice(
this.items.findIndex(x => x.id === id),
1
);
}
},
created() {
setTimeout(() => (this.loading = false), 2000);
}
});
</script>
</body>