ElementUI 列表使用

1、安裝

npm i element-ui -S

2、引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3、使用列表

<template>
  <el-table :data="dataList" stripe style="width: 100%">
    <el-table-column prop="id" label="id"> </el-table-column>
    <el-table-column prop="title" label="標題"> </el-table-column>
    <el-table-column prop="" label="圖片">
      <template slot-scope="scope">
        <img :src="scope.row.title_img" alt="" style="width: 60px" />
      </template>
    </el-table-column>

    <el-table-column prop="content" label="內容"> </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="allAdd(scope.row)"
          >編輯</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="deleteData(scope.row.id, scope.$index)"
          >刪除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

注意圖片顯示

<el-table-column prop="" label="圖片">
  <template slot-scope="scope">
    <img :src="scope.row.title_img" alt="" style="width: 60px" />
  </template>
</el-table-column>