liunan #10

Merged
liunan merged 47 commits from liunan into master 2024-09-13 14:43:34 +08:00
5 changed files with 133 additions and 28 deletions
Showing only changes of commit 9675c4f2d5 - Show all commits

View File

@ -1,42 +1,66 @@
<template>
<el-table v-bind="$attrs" v-on="$listeners" :data="data">
<el-table-column v-for="item,index in columns" :key="index" v-bind="item">
<template slot-scope="scope">
<div v-if="item.soltName">
<slot :name="item.soltName" :row="scope.row" >
</slot>
</div>
<div v-else>
{{scope.row[item.prop]}}
</div>
</template>
</el-table-column>
</el-table>
<div class="agtablebox">
<el-table v-bind="$attrs" v-on="$listeners" :data="data" size="small">
<el-table-column v-for="item,index in columns" :key="index" v-bind="item">
<template slot-scope="scope">
<div v-if="item.soltName">
<slot :name="item.soltName" :row="scope.row" >
</slot>
</div>
<div v-else>
{{scope.row[item.prop]}}
</div>
</template>
</el-table-column>
</el-table>
<div class="agtablefooter">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="pageSizes||[10,100,200,500]"
:page-size="pageSize"
layout="sizes,prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "agTable",
components: {
},
props:["columns","data"],
name: "agTable",
props:["columns","data",'pageSize','currentPage','total','pageSizes'],
data() {
return {
width: "160px",
return {
};
},
mounted() {
},
methods: {},
methods: {
handleSizeChange(e){
this.$emit('onSizeChange',e);
},
handleCurrentChange(e){
this.$emit('onCurrentChange',e);
}
},
};
</script>
<style lang="scss" scoped>
.agtablebox{
background: #fff;
width: 100%;
.agtablefooter{
display: flex;
justify-content: flex-end;
padding:12px;
}
}
::v-deep {
.el-table {
width: 100%;

View File

@ -0,0 +1,9 @@
import agUpdate from './src'
// 为组件提供 install 安装方法,供按需引入
agUpdate.install = function (Vue) {
Vue.component(agUpdate.name, agUpdate)
}
// 导出组件
export default agUpdate;

View File

@ -0,0 +1,64 @@
<template>
<div>
<el-upload
action=""
list-type="picture-card"
v-bind="$attrs"
v-on="$listeners"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
@change="onUpdate"
ref="agupdateref"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
name: "agUpdate",
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList:[]
};
},
mounted() {
console.log(this.$refs.agupdateref,'this.$refs.agupdateref');
let input=this.$refs.agupdateref.vnode;
console.log(input,'input');
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
onUpdate(e){
console.log(e,"ee");
}
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.el-table {
width: 100%;
}
}
</style>

View File

@ -1,13 +1,15 @@
// 导入组件
import agInput from './agInput/index'
import agSelect from './agSelect/index'
import agInput from './agInput/index';
import agSelect from './agSelect/index';
import agUpdate from './agUpload';
// 注册组件
// 组件列表
const components = [
agInput,
agSelect
agSelect,
agUpdate
]
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)
@ -30,5 +32,6 @@
export {
// 以下是具体的组件列表
agInput,
agSelect
agSelect,
agUpdate
}

View File

@ -39,7 +39,7 @@
>
</ag-MultifunctionSearch>
<agQuery :inputs="inputs" @onSearch="onSearch"/>
<agTable :columns="columns" :data="tabledata" >
<agTable :columns="columns" :data="tabledata" :currentPage="2" :pageSize="100" :total="500">
<template #name="{row}">
<div>{{row.name}}11</div>
</template>
@ -47,6 +47,9 @@
<div>{{row.date}} </div>
</template>
</agTable>
<agUpdate>
</agUpdate>
<!-- <el-input
size="small"
placeholder="请输入内容"
@ -75,8 +78,10 @@ import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
import agQuery from "../packages/agQuery/src/index.vue";
import agTable from "../packages/agTable/src/index.vue";
import agElemUI from "../packages/index.js";
Vue.use(ElementUI);
Vue.use(agElemUI);
export default {