为element-ui表设置行组件

Question

刚开始使用Vue和Element UI libraray，但被其表组件卡住了：https://element.eleme.io/#/en-US/component/table

我希望每个表行都有一个组件来处理与该组件中与该行相关的所有逻辑（动作，单击等），但是检查它们的文档看起来这些组件是基于列的。我想念什么？

Answer 1

让我向您展示如何使用基本的el-table，例如处理一行数据

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>