最初に依存関係を導入する
npm install element-plus --save
main.js には 2 つの依存関係を導入する必要があります。
import ElementPlus from 'element-plus';
import "element-plus/dist/index.css";
それなら、これを vue にマウントしたほうがいいです
。
createApp(App).use(ElementPlus)
次に、コンポーネント上で ElementUi テーブル コンポーネントを使用してみます。
参照コードは次のとおりです。
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
reactive } from 'vue'
export default {
setup(){
const tableData = reactive([{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}])
return {
tableData
}
}
};
</script>
動作結果は以下の通りで
問題ありません