Compare commits

...

3 Commits

Author SHA1 Message Date
ln1778 ab371f676a 22 2024-09-05 18:34:19 +08:00
ln1778 9675c4f2d5 df 2024-09-05 18:34:12 +08:00
ln1778 5fe305aa80 fdf 2024-09-05 18:31:19 +08:00
5 changed files with 133 additions and 29 deletions

View File

@ -1,9 +1,9 @@
<template> <template>
<el-table v-bind="$attrs" v-on="$listeners" :data="data"> <div class="agtablebox">
<el-table v-bind="$attrs" v-on="$listeners" :data="data" size="small" :header-cell-style="$attrs.headerCellStyle||{backgroundColor:'#f7f7f7'}">
<el-table-column v-for="item,index in columns" :key="index" v-bind="item"> <el-table-column v-for="item,index in columns" :key="index" v-bind="item">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="item.soltName"> <div v-if="item.soltName">
<slot :name="item.soltName" :row="scope.row" > <slot :name="item.soltName" :row="scope.row" >
</slot> </slot>
</div> </div>
@ -14,30 +14,53 @@
</el-table-column> </el-table-column>
</el-table> </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> </template>
<script> <script>
export default { export default {
name: "agTable", name: "agTable",
components: { props:["columns","data",'pageSize','currentPage','total','pageSizes'],
},
props:["columns","data"],
data() { data() {
return { return {
width: "160px",
}; };
}, },
mounted() { mounted() {
}, },
methods: {}, methods: {
handleSizeChange(e){
this.$emit('onSizeChange',e);
},
handleCurrentChange(e){
this.$emit('onCurrentChange',e);
}
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.agtablebox{
background: #fff;
width: 100%;
.agtablefooter{
display: flex;
justify-content: flex-end;
padding:12px;
}
}
::v-deep { ::v-deep {
.el-table { .el-table {
width: 100%; 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 agInput from './agInput/index';
import agSelect from './agSelect/index' import agSelect from './agSelect/index';
import agUpdate from './agUpload';
// 注册组件 // 注册组件
// 组件列表 // 组件列表
const components = [ const components = [
agInput, agInput,
agSelect agSelect,
agUpdate
] ]
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册) // 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)
@ -30,5 +32,6 @@
export { export {
// 以下是具体的组件列表 // 以下是具体的组件列表
agInput, agInput,
agSelect agSelect,
agUpdate
} }

View File

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