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.
Related
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?
How can I multiple the Unit price and the value of the Unit price and the vat?
Example:
Quantity: 2
Vat: 15%
Unit price: 2000
=2000x1.15 (Unit price x vat)
=2300x2
Can someone help me with this? Thank you. I am using Vue/Nuxt. I don't know how to do it.
<el-table-column label="Quantity">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.quantity"
placeholder="Input quantity..."
class="w-full"
required
>
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="Unit Price">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.unit_price"
placeholder="Input unit price..."
class="w-full"
required
>
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="VAT">
<template slot-scope="scope">
<el-select
v-model="scope.row.vat"
:remote-method="remoteMethod"
remote
filterable
style="width: 100%"
>
<el-option
v-for="{ name } in tax"
:key="name"
:label="name"
:value="name"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Total">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.total"
placeholder="Input total..."
class="w-full"
required
value="scope.row.quantity * scope.row.vat"
>
</el-input>
<span></span>
</el-form-item>
</template>
</el-table-column>
If I read the code correctly you are very close:
In this segment:
<el-input
v-model="scope.row.total"
placeholder="Input total..."
class="w-full"
required
value="scope.row.quantity * scope.row.vat"
>
You should remove the v-model and use v-bind:value instead of value:
<el-input
placeholder="Input total..."
class="w-full"
required
v-bind:value="scope.row.quantity * scope.row.vat"
>
// or: #value="scope.row.quantity * scope.row.vat"
If you want the total to be editable by the user, you could do the following
<el-input
placeholder="Input total..."
class="w-full"
required
v-bind:value="scope.row.quantity * scope.row.vat"
#input="scope.$row.total = $event.target.value"
>
But, this means that $row.total will only be set when the user changes it.
Another strategy would be to calculate the total field for each row before you give it to the template, then you would only use v-model="scope.$row.total" and omit v-bind:value.
<el-table-column label="id" width="80">
<template slot-scope="scope">
<span style="margin-left: 10px">{{(currentPage-1) * pageSize +TableMovie.indexOf(scope.row) +1 }} </span>
</template>
</el-table-column>
<el-table-column label="name" width="120">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.movie }}</span>
</template>
</el-table-column>
<el-table-column label="Rate" width="120">
<template slot-scope="scope">
<el-rate
v-model="scope.row.evaValue"
#change="handleRate(scope.row.id,scope.row.evaValue)"
show-text>
</el-rate>
I want to collect the rate for each movie. When user clicks the submit button, the database will be updated correspondingly.
I would like to know how to collect the rate, for the v-model for el-rate is a single value.
Hello I have a question on how to attach html element to table row in Element UI table.
<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>
// Add some other element in here like div,span,p etc...
</el-table>
I want the html element to be added in each row.
Is there a way to do that in Element UI?
Not sure what you are trying to achieve but you can add an empty column and put the custom html in here:
<template>
<el-table
:data="tableData"
border
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-column>
<el-button>What every you want</el-button
</el-table-column>
</el-table>
</template>
Or use slots:
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
<template slot-scope="scope">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
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>