ElementUI列表使⽤1、安装
elementui登录界面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 >
<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="w.title_img" alt="" />
</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="w)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="w.id, scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</template>
注意图⽚显⽰
<el-table-column prop="" label="图⽚">
<template slot-scope="scope">
<img :src="w.title_img" alt="" />
</template>
</el-table-column>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。