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>
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.
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.
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>