标签：01 CDN Element item Plus 2022 address 二道区 app
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<link rel="shortcut icon" href="#" />
<!-- 导入样式 -->
<!-- <link rel="stylesheet" href="./cdn/dist/index.css" /> -->
<link rel="stylesheet" href="./cdn/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div>
<el-button type="primary">Primary</el-button>
</div>
<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>
<div>
<el-pagination v-model:currentPage="currentPage1" :page-size="100" layout="total, prev, pager, next"
:total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</div>
<div>
<el-steps :active="active" finish-status="success">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
</el-steps>
<el-button style="margin-top: 12px" @click="next">Next step</el-button>
</div>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</div>
<div>
<el-row class="tac">
<el-col :span="4">
<h5 class="mb-2">Default colors</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-sub-menu index="1">
<template #title>
<el-icon>
<location />
</el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon>
<icon-menu />
</el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon>
<document />
</el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon>
<setting />
</el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
<div>
<el-empty description="description"></el-empty>
</div>
<div id="myDiv"></div>
</div>
<!-- 导入 Vue 3 -->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.6/vue.global.prod.min.js"></script>
<!-- 导入组件库 -->
<script src="./cdn/dist/index.full.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 自定义js -->
<script src="./test27.js" type="module"></script>
</body>
</html>
JS
import zhCn from './cdn/es/locale/lang/zh-cn.mjs';
const App = {
data() {
return {
message: "Hello Element Plus",
tableData: [{
date: '2022-01-01',
name: '张小三',
address: '吉林省长春市二道区 1 号'
}, {
date: '2022-01-02',
name: '李小四',
address: '吉林省长春市二道区 2 号'
}, {
date: '2022-01-03',
name: '王小五',
address: '吉林省长春市二道区 3 号'
}, {
date: '2022-01-04',
name: '赵小六',
address: '吉林省长春市二道区 4 号'
}],
active: 0,
activeName: 'first'
};
},
methods: {
next() {
if (this.active++ > 2) this.active = 0
},
handleClick(tab, event) {
console.log(tab.props);
console.log(event);
console.log($("#myDiv"));
}
}
};
const app = Vue.createApp(App);
app.use(ElementPlus, {
locale: zhCn
});
app.mount("#app");
标签：01,CDN,Element,item,Plus,2022,address,二道区,app 来源： https://www.cnblogs.com/kgdxpr/p/15789089.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。