I'm using that for table now, but the header of the table is able to drag for now. How can I drag the table's columns?
<el-table
ref="tableRef"
class="table-responsive table-flush"
:data=tableData"
row-key="id"
header-row-class-name="thead"
#sort-change="sortChange"
<el-table-column label="Address" min-width="200px" prop="address">
<template #default="{ row }">
<span>{{ row.address }}</span>
</template>
</el-table-column>
<el-table-column label="Amount" min-width="150px" prop="commitment">
<template #default="{ row }">
<span>{{ row.amount }} {{ shortCurrency }}</span>
</template>
</el-table-column>
<el-table-column
label="Claimable"
min-width="130px"
prop="total"
>
<template #default="{ row }">
<span>
{{ row.amount / currentPrice }}
</span>
</template>
</el-table-column>
</el-table>
mounted() {
this.initializeTable()
},
method: {
initializeTable() {
const theadColumn = this.$refs.tableRef.$el.querySelector(
'.el-table__header-wrapper .el-table__header thead tr'
)
Sortable.create(theadColumn, {
draggable: 'th',
onEnd: this.dragReorderColumn,
})
},
}
I'm using vue element-ui. I want to make to move that header and body of table in same time when I drag the table's header. Is it possible?
Related
Here is my el-table code-
<div class="row">
<div class="col-sm-12">
<el-table :data="membersList">
<el-table-column label="Name" prop="member_name" align="center">
</el-table-column>
<el-table-column label="Email" prop="member_email">
</el-table-column>
<el-table-column label="Role" prop="member_role"> </el-table-column>
<el-table-column
align="center"
label="Designation"
prop="member_designation"
></el-table-column>
<el-table-column
align="center"
label="Country"
prop="member_country"
></el-table-column>
<el-table-column label="Operations">
<template slot-scope="scope">
<base-button
type="info"
#click="editMember(scope.$index, scope.row)"
class="btn-sm mr-2"
>Edit</base-button
>
<base-button
type="danger"
#click="deleteMember(scope.$index, scope.row)"
class="btn-sm"
>Delete</base-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
I'm expecting to delete the rows from the table by clicking the delete button. The data rendering from the backend server, now I added the delete button but don't know how to create a function to delete the row when clicking on it.
You already have the index of the row, so just use vue.delete (this.$delete) like this-
deleteMember(index, row) {
this.$delete(this.membersList, index);
},
Read more about vue.delete in the documentation.
I need to change the row font color of a vuetify v-data-table.
I receive from my backend a set of rows and each row has a column called "color_status".
I have created a template to do it. But, the problem is that when executed it shows all fields.
I´d like to show only the fields of the header.
Is there a simple way to do it?
<v-data-table
:headers="headers"
:items="fila"
:options.sync="options"
:server-items-length="total"
:loading="loading"
sort-by="nome"
:items-per-page="5"
:search="search"
>
<template v-slot:item="{ item }">
<tr :style="{ color: getColorStatus(item) }">
<td v-for="key in Object.keys(item)" :key="key">
{{ item[key] }}
</td>
</tr>
</template>
<template v-slot:item.ativo="{ item }">
<v-icon color="success">
{{
item.ativo.trim() == "T"
? "mdi-checkbox-marked"
: "mdi-checkbox-blank-outline"
}}
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" #click="restart">Reiniciar</v-btn>
</template>
<template v-slot:item.nome="{ item }">
<router-link :to="{ name: 'EditFila', params: { id: item.id } }">{{
item.nome
}}</router-link>
</template>
</v-data-table>
methods:{
getColorStatus(item) {
return item.color_status;
}
}
Why don't you loop through headers instead of Objects ?
<td v-for="key in headers" :key="key">
{{ item[key] }}
</td>
Trying to use Vuetify's Data-Table to search/filter based on the computed value of a field. As feel free to jump into the codepen and type in some values for yourself. For example, I have it setup in such a way that the email address field can be searched by; however, the name of the employee and phone record fields are not functional.
Codepen
https://codepen.io/Jasilo/pen/PooLjbE
VUE:
<div id="app">
<v-app id="inspire">
<v-card>
<header>How can I search by the computed Name and Phone fields?</header>
<v-card-title>
<header>Employee List</header>
<v-spacer></v-spacer>
<v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
</v-card-title>
<v-data-table v-bind:headers="headers" v-bind:items="employeesArray" v-bind:search="search">
<template v-slot:item.email="{ item }">
<div>
{{ item["email"] }} </div>
</template>
<template v-slot:item.name="{ item }">
<div>
{{ getName(item) }}
</div>
</template>
<template v-slot:item.phone="{ item }">
<div> {{ getPhone(item) }}</div>
</template>
<template v-slot:no-data>
<div icon="warning">
{{ gridEmpty }}
</div>
</template>
</v-data-table>
</v-card>
</v-app>
</div>
HTML:
<div id="app">
<v-app id="inspire">
<v-card>
<header>How can I search by the computed Name and Phone fields?</header>
<v-card-title>
<header>Employee List</header>
<v-spacer></v-spacer>
<v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
</v-card-title>
<v-data-table v-bind:headers="headers" v-bind:items="employeesArray" v-bind:search="search">
<template v-slot:item.email="{ item }">
<div>
{{ item["email"] }} </div>
</template>
<template v-slot:item.name="{ item }">
<div>
{{ getName(item) }}
</div>
</template>
<template v-slot:item.phone="{ item }">
<div> {{ getPhone(item) }}</div>
</template>
<template v-slot:no-data>
<div icon="warning">
{{ gridEmpty }}
</div>
</template>
</v-data-table>
</v-card>
</v-app>
</div>
Simplest way is to use a computed property:
computed: {
employeeTableData() {
return this.employeesArray.map(e => {
return {
email: e.email,
name: this.getName(e),
phone: this.getPhone(e),
};
});
},
},
Then change v-data-table to use employeeTableData instead and directly reference the attributes.
Working codepen
You can then search XD or 666- and it will correctly filter on name and phone number.
I'm looking for an example of using the Element UI table component without having to hard code all the columns. All the examples I have seen, including the official Element UI table docs show each and every column specified in the template.
I'm trying to do something like this. In my old table component, this gives me all the columns and my extra end column with a delete button.
<template>
<div v-if="tableData.length > 0">
<b-table striped hover v-bind:items="tableData" :fields=" keys.concat(['actions']) ">
<template slot="actions" slot-scope="row">
<b-btn size="sm" #click.stop="tableClick(row.item)" class="mr-1">
Delete
</b-btn>
</template>
</b-table>
</div>
</template>
In contrast, the Element UI Table examples all use multiple repeated el-table-column tags. Due to loading data with differing columns at runtime, I can't use this approach.
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</template>
I'm a beginner and struggling to understand how to accomplish my goal with the el-table.
You can have the columns as an array of objects with needed properties and iterate over them in the template with v-for:
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column v-for="column in columns"
:key="column.label"
:prop="column.prop"
:label="column.label"
:formatter="column.formatter"
:min-width="column.minWidth">
</el-table-column>
<el-table-column fixed="right">
<template slot-scope="scope">
... your delete button or whatever here...
</template>
</el-table-column>
</el-table>
</template>
and then you get your columns from somewhere, they could be in the data for example:
data() {
return {
columns: [
{
prop: 'date',
label: 'Date',
minWidth: 180px
},
{
prop: 'name',
label: 'Name',
minWidth: 180px
},
{
prop: 'address',
label: 'Address',
formatter: (row, col, cell, index) => this.addressFormatter(cell), //example of a formatter
},
],
};
},
I'm trying to display rows using the Element IO in VueJs. My problem is why is my code not outputting and how can i add some rows and remove some rows? Is there something wrong with my code? I've attached a v-for but it seems it can't work. I'm sorry i'm new to element-ui. Please see my code below.Thank you.
<template>
<div>
<el-form>
<el-table v-for='(item, index) in items' :key='index'>
<el-table-column
sortable="true"
label="Item">
<template>
<el-input v-model="item.item_id"></el-input>
</template>
</el-table-column>
<el-table-column
sortable="true"
label="Quantity">
<template>
<el-input v-model="item.quantity"></el-input>
</template>
</el-table-column>
<el-table-column
sortable="true"
label="Unit">
<template>
<el-input v-model="item.quantity"></el-input>
</template>
</el-table-column>
<el-table-column
sortable="true"
label="Unit Price">
<template>
<el-input v-model="item.unit_price"></el-input>
</template>
</el-table-column>
<el-table-column
fixed="right"
property="action"
label="Action">
<template>
<el-button type="danger" size="small">Remove</el-button>
</template>
</el-table-column>
</el-table>
<br>
<el-form-item style="float:right;">
<el-button type="submit" #click.prevent="createNewPurchaseOrder">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
item_id: '1',
quantity: '8',
unit_id: 'Gram',
unit_price: '100'
}
]
}
},
methods: {
createNewPurchaseOrder () {
console.log(this.$data)
}
}
}
</script>
You don't need to iterate your self. el-table component from Element-Ui is taking a array as data props to work. See Table Props for el-table component in ElementUI
This should works :
<el-table :data="items">
...
</el-table>
Each el-table-column must be a key of your item in your item list by adding prop='myKey' to each el-table-column
For exemple if I got a array of items like this :
[{
id : 12,
firstname : "John",
lastname : "Doe"
}]
I will have a table like this
<el-table :data="items">
<el-table-column prop="id" label="ID">...</el-table-column>
<el-table-column prop="firstname" label="Firstname">...</el-table-column>
<el-table-column prop="lastname " label="Lastname">...</el-table-column>
</el-table>
When you will remove or add an item to your array, the :data props of the el-table will be reactive to changes.
Take more look at element table documentation
You have to pass a data property to el-table and a prop property to el-table-column
<template>
<div>
<el-form>
<el-table :data="items" :key='index'>
[...]
</el-table>
<br>
<el-form-item style="float:right;">
<el-button type="submit" #click.prevent="createNewPurchaseOrder">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
</div>