elementui常用组件-个人版(间断更新)
Element UI 是一个为 Vue.js 2.0 设计的组件库,它提供了丰富的组件,如表单、按钮、表格、布局、弹窗等。以下是一些常用的 Element UI 组件的简单示例代码。
- 按钮(Button)
<template>
<el-button type="primary">点击我</el-button>
</template>
- 表单输入(Input)
<template>
<el-input placeholder="请输入内容"></el-input>
</template>
- 下拉菜单(Select)
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
value: '',
options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]
};
}
};
</script>
- 表格(Table)
<template>
<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>
</template>
<script>
export default {
data() {
return {
tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }]
};
}
};
</script>
- 对话框(Dialog)
<template>
<el-button type="text" @click="dialogVisible = true">打开对话框</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
这些组件都是 Element UI 中的一部分,你可以在 Element UI 的官方文档中找到更多详细的使用方法和属性。
评论已关闭