How to change Label Value in Vue with Element

I am using Element to design my Admin Panel.

I have a Select. Now I want to select an option. With that The header of the Table Title will be changed. How is this possible?

Another problem is I want to placeholder the first element of the Select-Option.


Select Part:

<el-select v-model="value" placeholder="Select">
  v-for="item in options"


   <el-table-column label="value" width="120px" align="center" />

I want to make dynamic this label


data() {
    return {
      options: [{
        value: 'billingCountry',
        label: 'Billing Country'
      }, {
        value: 'billingState',
        label: 'Billing State'
      }, {
        value: 'billingCity',
        label: 'Billing City'
      }, {
        value: 'billingZIP',
        label: 'Billing ZIP'
      }, {
        value: 'shippingCountry',
        label: 'Shipping Country'
      value: ''


You could write it like this:

<el-table-column :label="value" width="120px" align="center" />

The magic is the colon before label. It is a shortcut for v-bind:label (see here However it writes the value of the selected options. If you want to have the label can you create a computed property which finds the label for the selected value:

computed: {
  selectedLabel() {
     if (! this.value) {
       return 'None selected';
     const selectedOption = this.options.find(option => option.label === this.value);
     return selectedOption.label;

and now you can do

<el-table-column :label="selectedLabel" width="120px" align="center" />

the computed property will be recalculated every time one of the variables it uses changes (see here

1 Like

This is giving error.

[Vue warn]: Error in render: “TypeError: Cannot read property ‘label’ of undefined”

Solved the problem.

this.options.find(option => option.value === this.value);