Настройка компонентов строки для таблицы element-ui - PullRequest
Новая
       9

Настройка компонентов строки для таблицы element-ui

1 голос
/ 09 ноября 2019

только что начал использовать библиотеку Vue и Element UI, но застрял с их компонентом таблицы: https://element.eleme.io/#/en-US/component/table

Я хотел бы иметь компонент для каждой строки таблицы для обработки всей логики, связанной с этой строкой (действия, щелкните и т. д.) в этом компоненте, но проверка их документации выглядит как компоненты на основе столбцов. Чего мне не хватает?

1 Ответ

0 голосов
/ 11 ноября 2019

Позвольте мне показать вам, как использовать базовые 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>
...