Vue 的Element UI 封裝 el-table和 el-pagination 結合組件
- 在後臺管理系統中，經常會用到table和pagination 分頁結合使用。封裝個組件讓其試用於所有的表格頁面。
- 思路：
- 確定要封裝的內容，從父組件傳給子組件的內容和從子組件傳給父組件的內容，
- 熟悉父子組件間傳值方法
<template>
<div>
<div class="all_table">
<el-table :data="tableData" :border="objcontent.border" :stripe="objcontent.stripe" v-loading="objcontent.loading" @selection-change="handleSelectionChange">
<el-table-column v-if="objcontent.changeselect?objcontent.changeselect:false" type="selection" style="width: 50px;">
</el-table-column>
<el-table-column v-if="objcontent.number?objcontent.number:false" type="index" style="width: 50px;">
</el-table-column>
<el-table-column v-for="(item,index) in tableColumns" :key="index" :prop="item.prop" :align="item.align" :minWidth="item.minWidth" :label="item.label">
<template slot-scope="scope">
<slot :name='index' :row="scope.row">{{scope.row[item.prop]}}</slot>
</template>
</el-table-column>
<el-table-column :min-width="operations.width" :fixed="operations.fixed" :label="operations.label" :align="operations.align" v-if="operations.list.length > 0">
<template slot-scope="scope">
<div class="operations">
<template v-for="(item, key) in operations.list">
<el-button :type="item.type?item.type:'text'" size="mini" :icon="item.icon" :disabled="item.disabled" @click="item.method(key,scope.row)">{{item.label}}
</el-button>
</template>
</div>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" style="text-align:center;margin-top:20px;" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="pager_layout" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
multipleSelection: [],
};
},
methods: {
// 切換每頁顯示的數量
handleSizeChange(val) {
console.log('每頁顯示個數', val)
// this.$emit('update:pageSize',val)
this.$emit('handleSizeChange', val)
},
// 切換頁碼
handleCurrentChange(val) {
console.log('顯示第幾頁', val)
// this.$emit('update:pageIndex',val)
this.$emit('handleCurrentChange', val)
},
//選擇多條
handleSelectionChange(val) {
this.multipleSelection = val
this.$emit('handleSelectionChange', val)
},
},
created() { },
mounted() { },
computed: {},
watch: {
},
props: {
tableData: {
type: Array,
required: true
}, //table
total: {
type: Number,
required: true
}, //總條數
pager_layout: {
type: String,
default: 'total,sizes,prev, pager, next, jumper',
}, //組件佈局
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40]
},//每頁顯示個數選擇器
pageSize: {
type: Number,
default: 10,
required: true
},//每頁顯示個數
pageIndex: {
type: Number,
default: 1,
required: true
},//當前頁碼
tableColumns: {
type: Array,
default: () => [],
required: true
},//每列標題名字
objcontent: {
type: Object,
default: {
border: true,//是否帶有縱向邊框
stripe: true, // 是否爲斑馬紋 table
loading: true, // 是否添加表格loading加載動畫
changeselect: false,//是否有多選項列
number: true,//是否有序號
}
},//一些表格樣式
operations: {
type: Object,
default() {
return {}
},//操作按鈕
},
}
}
</script>
<style scoped>
</style>
<!--
*創建人：
*創建時間：
*說明：設備列表
*修改人：
*修改時間：
*說明：
-->
<template>
<div>
<!-- :pageIndex.sync="formData.pageIndex" -->
<!-- :pageSize.sync='formData.pageSize' -->
<equimentcomponent
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@handleSelectionChange="handleSelectionChange"
:operations="operations"
:objcontent="objcontent"
:tableData="tableData"
:total='total'
:pageIndex="formData.pageIndex"
:pageSizes='pageSizes'
:pageSize='formData.pageSize'
:pager_layout='pager_layout'
:tableColumns='tableColumns'>
<div slot="0" slot-scope="scope">
{{scope.row.stationName}}
</div>
<div slot="2" slot-scope="scope">
{{scope.row.deviceTs}}
</div>
</equimentcomponent>
<!-- 刪除模態框 -->
<el-dialog title="是否刪除客戶" :visible.sync="dialogModalDel" width="38%">
<div style='text-align:center;height:60px;line-height:60px'>
<div class='dialog_img_one'>
<img class='img' src="../../../assets/img/pointcustomer/shanchu_wenhao.png" alt="">
<span class='dialog_p'>您是否確認刪除該設備信息，刪除後信息將無法找回？</span>
</div>
</div>
<span slot="footer">
<el-button @click="dialogModalDel = false">取 消</el-button>
<el-button type="primary" @click="gotoDel">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import equimentcomponent from './equimentcomponent'
export default {
name: "equipmentlist",
data() {
return {
dialogModalDel: false, //刪除模態框標識
formData: {
deviceId: undefined,
deviceName: "",
stationId: undefined,
deviceClassVal: "",
pageSize: 10,
pageIndex: 1
}, //搜索表單
tableData: [],
tableColumns: [
{
prop: "stationName",
align: "left",
label: "設備安裝位置",
minWidth: 200,
slot:true,
},
{
prop: "deviceClassVal",
align: "left",
label: "設備類型",
minWidth: 140,
formatter: (row, column, cellValue) => {
console.log(',,,,',row, column, cellValue)
return `<span style="white-space: nowrap;color: red;">${row.deviceClassVal}</span>`
}
},
{
prop: "deviceTs",
align: "left",
label: "型號",
minWidth: 120
},
{
prop: "price",
align: "left",
label: "金額",
minWidth: 80
},
{
prop: "ascription",
align: "left",
label: "設備歸屬",
minWidth: 80,
render: (h, params) => {
console.log(h, params)
return h('el-tag', {
props: {type: params.row.ascription === '公司購置' ? 'success' : params.row.ascription === '客戶自有' ? 'info' : 'danger'} // 組件的props
}, params.row.ascription === '客戶自有' ? '客戶自有' : '客戶自有')
}
}
],
pageSizes: [10, 20, 30, 40],
objcontent: {
border: true,//是否帶有縱向邊框
stripe: true, // 是否爲斑馬紋 table
loading: false, // 是否loading(在加載數據時記得判斷是否開啓)
changeselect: true,//是否有前面的多選項
number: true,//是否有序號
},
operations: {
width: 160,
fixed: 'right',
label:"操作",
align:"center",
list: [
{
label: '編輯',
type: 'text',
icon: 'el-icon-edit',
disabled: false,
method: (index, row) => {
this.editChange(index, row)
}
},
{
label: '遷移記錄',
type: 'text',
icon: 'el-icon-edit',
disabled: false,
method: (index, row) => {
this.historyChange(index, row)
}
},
{
label: '刪除',
type: 'text',
icon: 'el-icon-delete',
disabled: false,
method: (index, row) => {
this.delChange(index, row)
}
}
]
},//操作按鈕
export_excle_flag: false,//
total: 0, //總條數
pager_layout: "total,sizes,prev, pager, next, jumper",//組件佈局
equipmentId: undefined //設備id
};
},
computed: { },
created() {
this.initgetinfocountes();
this.initquerylistes();
this.initallcountes();
this.initoperationslnp();
this.initoperationsdtpe();
},
activated() { },
mounted() {
},
destroyed() { },
methods: {
//點擊遷移記錄
historyChange(row) {
this.$router.push({
name: "migrationhistory",
params: {
equipmentrow: row
}
});
},
//點擊編輯
editChange(row) {
this.$router.push({
name: "equipmentedit",
params: {
equipmentrow: row
}
});
},
//點擊刪除
delChange(index,row) {
console.log(index,row)
this.dialogModalDel = true;
this.equipmentId = row.id;
},
//刪除模態框點擊確定
gotoDel() {
console.log(this.equipmentId)
delinfobyids.post({ id: this.equipmentId }, this).then(res => {
if (res !== null) {
this.$message({
message: "刪除成功",
type: "success"
});
this.dialogModalDel = false;
this.initquerylistes();
this.initallcountes();
this.initgetinfocountes();
} else {
this.$message({
message: "刪除失敗",
type: "error"
});
}
});
},
// 分頁
handleSizeChange(val) {
this.formData.pageSize = val;
this.initquerylistes();
this.initallcountes();
this.initgetinfocountes();
},
handleCurrentChange(val) {
this.formData.pageIndex = val;
this.initquerylistes();
this.initallcountes();
this.initgetinfocountes();
},
//多選項
handleSelectionChange (val) {
console.log('選中的', val)
},
//根據檢索條件查詢客戶信息列表
initquerylistes() {
let input = this._.cloneDeep(this.formData);
querylistes.post(input, this).then(res => {
if (res.code == 200) {
if (res.data) {
res.data.map(item => {
item.stationName = item.stationName ? item.stationName : "庫存"
})
this.tableData = res.data;
} else {
this.tableData = [];
}
}
});
},
//根據檢索條件查詢客戶信息列表計數
initallcountes() {
let input = this._.cloneDeep(this.formData);
allcountes.post(input, this).then(res => {
if (res !== null) {
this.total = res;
}
});
},
},
watch: { },
components: { equimentcomponent }
};
</script>
<style scoped>
.cursor:hover {
color: #409eff;
cursor: pointer;
}
</style>
