1.1.5 • Published 2 months ago
element-ui-components-pro v1.1.5
element-ui组件封装
基于element-ui,封装一些常用的组件,比如分页表格、分页下拉框;下拉框懒加载,以到达开箱即用的目的。
安装
前提是已安装了element-ui,安装教程可见:https://element.eleme.io/#/zh-CN/component/installation
npm install element-ui-components-pro
使用
main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import ElementUIPro from 'element-ui-components-pro';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.use(ElementUIPro);
table.vue
<template>
<ep-table
:columns="columns"
:request="request"
:responseFormat="responseFormat"
:pagination="pagination"
>
</ep-table>
</template>
<script>
export default {
data() {
return {
request: {
url: "/files/get",
method: "GET",
params: null,
data: null
},
columns: [
{
type: "selection",
width: "30",
},
{
prop: "id",
label: "ID",
width: "80",
sortable: true,
},
{
prop: "name",
label: "文件名称",
sortable: true,
ellipsis: true,
},
{
prop: "status",
label: "状态",
width: "大小",
width: "150",
sortable: true,
render: (h, {value}) => {
if (value == "正常")
return <el-tag type="success" size="medium" effect="plain">{value}</el-tag>;
else
return <el-tag type="warning" size="medium" effect="plain">{value}</el-tag>;
}
},
{
prop: "size",
label: "大小",
width: "150",
sortable: true,
},
{
prop: "create_time",
label: "创建时间",
width: "250",
sortable: true,
show: false
},
{
prop: "update_time",
label: "更新时间",
width: "250",
sortable: true,
},
{
label: "操作",
width: "100",
render: (h, {value, row, scope}) => {
return <el-popover
placement="top"
width="160"
ref={"deletePop" + scope.$index}
>
<p>确定删除?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" onClick={(e) =>
{
scope._self.$refs["deletePop" + scope.$index].showPopper = false;
}}>取消</el-button>
<el-button type="primary" size="mini" onClick={() => this.deleteRow(row.id, scope._self.$refs["deletePop" + scope.$index])}>确定</el-button>
</div>
<a href="javascript:void(0)" slot="reference">删除</a>
</el-popover>
}
}
],
}
},
methods: {
responseFormat: function (resp) {
if (resp.success) {
return {
rows: resp.body.rows,
total: resp.body.total
}
}
},
deleteRow: function (id, popper) {
popper.showPopper = false;
},
}
}
</script>
table预览
select.vue
<template>
<ep-select multiple v-model="value" :request="request" :responseFormat="responseFormat" @change="change"/>
</template>
<script>
export default {
data() {
return {
value: null,
request: {
url: "/table.json",
method: "GET"
},
responseFormat: resp => {
return {
rows: resp.body.rows.map(row => {
return {
value: row.id,
label: row.name,
render: <span>{row.name}<el-tag style="margin-left: 10px" type={row.status == "正常" ? "success" : "warning"}>{row.status}</el-tag></span>
}
}),
total: resp.body.total
}
}
}
}
}
</script>
select预览
开发
npm i
npm run dev
1.1.5
2 months ago
1.1.4
4 months ago
1.1.3
10 months ago
1.1.2
10 months ago
1.1.1
11 months ago
1.1.0
11 months ago
1.0.11
12 months ago
1.0.13
12 months ago
1.0.12
12 months ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago