在vue中如何使用element-plus的Table表单

给出一个简单的例子:

<template>
  <el-table :data="data.dataList" style="width: 100%">
    <el-table-column label="id" prop="id" />
    <el-table-column label="标题" prop="title" />
    <el-table-column label="图片" width="180">
    <template #default="scope">
        <div style="display: flex; align-items: center">
            <el-image :src="scope.row.cover"/>
        </div>
    </template>
</el-table-column>

    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="primary" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="primary" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button size="primary" type="danger" @click="handleDelete(scope.$index, scope.row)">
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { list, add, remove } from '../api/thing';

export default {
  data() {
    return {

      data: {
        dataList: [],
        selectedRowKeys: [],
        pageSize: 10,
        page: 1,
      },
    };
  },
  methods: {
    beforeUpload(file) {
    
    },
    getDataList() {
      list().then(res => {
        this.data.dataList = res.data
        console.log(this.data.dataList)
      })
    }
  },
  mounted() {
    this.getDataList();
  },
};
</script>

<style scoped lang="less">
.page-view {
  min-height: 100%;
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.table-operations {
  margin-bottom: 16px;
  text-align: right;
}

.table-operations>button {
  margin-right: 8px;
}
</style>

在这个例子中：

label表示列的名称，而pro则表示绑定的数据，

<template #default="scope">

        <div style="display: flex; align-items: center">

            <el-image :src="scope.row.cover"/>

        </div>

    </template>

则是将图片链接转换成图片显示在页面中