设置element-ui表的行组件

Question

刚开始使用Vue和Element UI库，但一直使用它们的表组件：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/element-ui@2.12.0/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/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>

​

Answer 2

根据Sugars' 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/element-ui@2.12.0/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/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>

​