Setting up row components for element-ui table

Question

just started using Vue and Element UI libraray but got stuck with their table component: https://element.eleme.io/#/en-US/component/table

I'd like to have a component for each table row to handle all logic related to that row (actions, click, etc.) in this component but checking their documentation looks like the components are column-based. What am I missing?

Do you want to be able to perform a series of operations on the current row in the last column (Operations)? Such as editing and delete function — sugars
– sugars, Commented Nov 9, 2019 at 13:38
Yes, or handling a click on a table row element. I'm kind of new to Vue so correct me if I'm wrong but my understanding was that I put everything in a component that belongs together and can be handled independently. So in my example the list takes care of loading the elements from the backend, handles endless scrolling, etc. and the row component everything related to one entry of the table. — floriansuchan
– floriansuchan, Commented Nov 10, 2019 at 9:32
After setting attribute data of el-table with an object array, you have access to the following data: row, column, $index and store (state management of Table) by Scoped slot. — sugars
– sugars, Commented Nov 11, 2019 at 2:13

sugars · Accepted Answer · 2019-11-11 02:30:28Z

Let me show you how to use the basic el-table, such as processing the data of a row

var Main = {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      // Here you can access the row data (objects in the object array) to be deleted
      console.log(index, row);
      this.$confirm('This will permanently delete the record. Continue?', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: 'Delete completed'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: 'Delete canceled'
        });
      });
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="Date"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
  </el-table-column>
  <el-table-column label="Name" width="180">
    <template slot-scope="scope">
        <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </template>
  </el-table-column>
  <el-table-column label="Operations">
    <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
  </el-table-column>
  </el-table>
  </template>
</div>

Prince Owen · Accepted Answer · 2020-02-01 13:48:58Z

Based on Sugars' answer you can toggle an input to allow edits throughout the columns on each row. I've made a simple demo based on his answer.

var Main = {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        editable: false
      }, {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        editable: false
      }, {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        editable: false
      }, {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        editable: false
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      row.editable = !row.editable;
    },
    handleDelete(index, row) {
      // Here you can access the row data (objects in the object array) to be deleted
      console.log(index, row);
      this.$confirm('This will permanently delete the record. Continue?', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: 'Delete completed'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: 'Delete canceled'
        });
      });
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="Date"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px" v-if="!scope.row.editable">{{ scope.row.date }}</span>
        <el-date-picker v-model="scope.row.date" v-if="scope.row.editable"></el-date-picker>
      </template>
  </el-table-column>
  <el-table-column label="Name" width="180">
    <template slot-scope="scope">
        <el-tag size="medium" v-if="!scope.row.editable">{{ scope.row.name }}</el-tag>
        <el-input v-model="scope.row.name" v-if="scope.row.editable"></el-input>
      </template>
  </el-table-column>
  <el-table-column label="Operations">
    <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
  </el-table-column>
  </el-table>
  </template>
</div>

Collectives™ on Stack Overflow

Setting up row components for element-ui table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related