tabletext(封裝table頁面代碼)
https://blog.csdn.net/weixin_43886711/article/details/102780607
<template>
????<div?class="table">
????????<el-table?id="iTable"?v-loading.iTable="options.loading"?:data="list"?:stripe="options.stripe"
????????????ref="mutipleTable"?@selection-change="handleSelectionChange"?border>
????????????<el-table-column?v-if="options.mutiSelect"?type="selection"?style="width:?55px;">
????????????</el-table-column>
????????????<!--region?數(shù)據(jù)列-->
????????????<template?v-for="(column,?index)?in?columns">
????????????????<el-table-column?:prop="column.prop"?:key='column.label'?:label="column.label"?:align="column.align"
????????????????????:width="column.width">
????????????????????<template?slot-scope="scope">
????????????????????????<template?v-if="!column.render">
????????????????????????????<template?v-if="column.formatter">
????????????????????????????????<span?v-html="column.formatter(scope.row,?column)"></span>
????????????????????????????</template>
????????????????????????????<template?v-else>
????????????????????????????????<span>{{scope.row[column.prop]}}</span>
????????????????????????????</template>
????????????????????????</template>
????????????????????????<template?v-else>
????????????????????????????<expand-dom?:column="column"?:row="scope.row"?:render="column.render"?:index="index">
????????????????????????????</expand-dom>
????????????????????????</template>
????????????????????</template>
????????????????</el-table-column>
????????????</template>
????????????<!--region?按鈕操作組-->
????????????<el-table-column?ref="fixedColumn"?label="操作"?align="center"?:width="operates.width"?:fixed="operates.fixed"
????????????????v-if="operates.list.filter(_x=>_x.show?===?true).length?>?0">
????????????????<template?slot-scope="scope">
????????????????????<div?class="operate-group">
????????????????????????<template?v-for="(btn,?key)?in?operates.list">
????????????????????????????<div?class="item"?v-if="btn.show"?:key='btn.id'>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //也可以換成el-button
????????????????????????????????<span?:style="btn.style"?size="mini"?:class="btn.class"?:plain="btn.plain"
????????????????????????????????@click="btn.method(key,scope.row)">{{?btn.label?}}
????????????????????????????????</span>
????????????????????????????</div>
????????????????????????</template>
????????????????????</div>
????????????????</template>
????????????</el-table-column>
????????????<!--endregion-->
????????</el-table>
????</div>
</template>
<script>
????import?{?mapGetters?}?from?'vuex';
????export?default?{
????????props:?{
????????????list:?{
????????????????type:?Array,
????????????????default:?[]
????????????},?//?數(shù)據(jù)列表
????????????columns:?{
????????????????type:?Array,
????????????????default:?[]
????????????},?//?需要展示的列?===?prop：列數(shù)據(jù)對應(yīng)的屬性，label：列名，align：對齊方式，width：列寬
????????????operates:?{},?//?操作按鈕組?===?label:?文本，type?:類型（primary?/?success?/?warning?/?danger?/?info?/?text），show：是否顯示，icon：按鈕圖標(biāo)，plain：是否樸素按鈕，disabled：是否禁用，method：回調(diào)方法
????????????options:?{
????????????????type:?Object,
????????????????default:?{
????????????????????stripe:?false,?//?是否為斑馬紋?table
????????????????????highlightCurrentRow:?false?//?是否要高亮當(dāng)前行
????????????????},
????????????}?//?table?表格的控制參數(shù)
????????},
????????//組件
????????components:?{
????????????expandDom:?{
????????????????functional:?true,
????????????????props:?{
????????????????????row:?Object,
????????????????????render:?Function,
????????????????????index:?Number,
????????????????????column:?{
????????????????????????type:?Object,
????????????????????????default:?null
????????????????????}
????????????????},
????????????????render:?(h,?ctx)?=>?{
????????????????????const?params?=?{
????????????????????????row:?ctx.props.row,
????????????????????????index:?ctx.props.index
????????????????????}
????????????????????if?(ctx.props.column)?params.column?=?ctx.props.column
????????????????????return?ctx.props.render(h,?params)
????????????????}
????????????}
????????},
????????//?數(shù)據(jù)
????????data()?{
????????????return?{
????????????????pageIndex:?1,
????????????????multipleSelection:?[],?//?多行選中
????????????}
????????},
????????mounted()?{
????????},
????????computed:?{
????????},
????????methods:?{
????????????//?多行選中
????????????handleSelectionChange(val)?{
????????????????this.multipleSelection?=?val
????????????????this.$emit('handleSelectionChange',?val)
????????????},
????????????//?顯示?表格操作彈窗
????????????showActionTableDialog()?{
????????????????console.log(4444)
????????????????this.$emit('handelAction')
????????????}
????????},
????}
</script>
<style>
????.operate-group?{
????????display:?flex;
????????flex-direction:?row;
????????justify-content:?space-around;
????}
</style>
引用頁面
<template>
????<div?class="app-container?calendar-list-container">
????????<el-row>
????????????<el-col?:span="24">
????????????????<div>
????????????????????<tabletext?:list="list"?@handleSelectionChange="handleSelectionChange"?:options="options"
????????????????????????:columns="columns"?:operates="operates">
????????????????????</tabletext>
????????????????????<div?class="pagination-container">
????????????????????????<el-pagination?@size-change="handleSizeChange"?@current-change="handleCurrentChange"
????????????????????????????:current-page.sync="listQuery.page"?:page-sizes="[10,20,30,?50]"
????????????????????????????:page-size="listQuery.limit"?layout="total,?sizes,?prev,?pager,?next,?jumper"
????????????????????????????:total="total">?</el-pagination>
????????????????????</div>
????????????????</div>
????????????</el-col>
????????</el-row>
????</div>
</template>
<script>
????import?tabletext?from?'views/layout/tabletext';
????import?{?page?}?from?'api/dl/meter/index';
????export?default?{
????????name:?'table1',
????????components:?{
????????????tabletext
????????},
????????computed:?{},
????????data()?{
????????????return?{
????????????????list:?[],?//?table數(shù)據(jù)
????????????????listQuery:?{
????????????????????page:?1,
????????????????????limit:?20,
????????????????????systemname:?undefined
????????????????},
????????????????total:?null,
????????????????options:?{
????????????????????stripe:?true,?//?是否為斑馬紋?table
????????????????????loading:?false,?//?是否添加表格loading加載動畫
????????????????????highlightCurrentRow:?true,?//?是否支持當(dāng)前行高亮顯示
????????????????????mutiSelect:?false,?//?是否支持列表項(xiàng)選中功能
????????????????},?//?table?的參數(shù)
????????????????columns:?[
????????????????????{
????????????????????????prop:?'meterid',
????????????????????????label:?'電表ID',
????????????????????????align:?'center',
????????????????????},?{
????????????????????????prop:?'title',
????????????????????????label:?'電表名稱',
????????????????????????align:?'center',
????????????????????????formatter:?(row,?column,?cellValue)?=>?{
????????????????????????????console.log(row.isenable)
????????????????????????????console.log(row)
????????????????????????????return?`<span?style="white-space:?nowrap;color:?dodgerblue;">${row.metername}</span>`
????????????????????????}
????????????????????},{
????????????????????????prop:?'meteraddress',
????????????????????????label:?'電表地址',
????????????????????????align:?'center',
????????????????????},?{
????????????????????????prop:?'magnification',
????????????????????????label:?'倍率',
????????????????????????align:?'center',
????????????????????},{
????????????????????????prop:?'manufacturer',
????????????????????????label:?'廠家',
????????????????????????align:?'center',
????????????????????},{
????????????????????????prop:?'metermodel',
????????????????????????label:?'型號',
????????????????????????align:?'center',
????????????????????},{
????????????????????????prop:?'meterrule',
????????????????????????label:?'規(guī)約',
????????????????????????align:?'center',
????????????????????},{
????????????????????????prop:?'cabinetnum',
????????????????????????label:?'柜號',
????????????????????????align:?'center',
????????????????????},{
????????????????????????prop:?'remark',
????????????????????????label:?'備注',
????????????????????????align:?'center',
????????????????????},{
????????????????????????prop:?'isenable',
????????????????????????label:?'是否有效',
????????????????????????align:?'center',
????????????????????????render:?(h,?params)?=>?{
????????????????????????????return?h('span',?{
????????????????????????????},?params.row.isenable?===?'1'???'是'?:?params.row.isenable?===?'2'???'否'?:?'')
????????????????????????}
????????????????????},
????????????????],?//?需要展示的列
????????????????//?按鈕
????????????????operates:?{
????????????????????width:?150,
????????????????????list:?[
????????????????????????{
????????????????????????????id:?'1',
????????????????????????????label:?'編輯',
????????????????????????????style:?'cursor:pointer;color:?#409eff;',
????????????????????????????show:?true,
????????????????????????????class:?'el-icon-edit',
????????????????????????????plain:?true,
????????????????????????????method:?(scope,?row)?=>?{
????????????????????????????????console.log(scope)
????????????????????????????????console.log(row)
????????????????????????????????this.handleEdit(row)
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????id:?'2',
????????????????????????????label:?'刪除',
????????????????????????????style:?'cursor:pointer;color:?#b3450e;',
????????????????????????????class:?'el-icon-delete',
????????????????????????????show:?true,
????????????????????????????plain:?false,
????????????????????????????method:?(index,?row)?=>?{
????????????????????????????????this.handleDel(row)
????????????????????????????}
????????????????????????}
????????????????????]
????????????????}?//?列操作按鈕
????????????}
????????},
????????created()?{
????????????this.getList();
????????},
????????methods:?{
????????????//?選中行
????????????handleSelectionChange(val)?{
????????????????console.log('val:',?val)
????????????},
????????????//?編輯
????????????handleEdit(index,?row)?{
????????????????console.log('?index:',?index)
????????????????console.log('?row:',?row)
????????????},
????????????//?刪除
????????????handleDel(index,?row)?{
????????????????console.log('?index:',?index)
????????????????console.log('?row:',?row)
????????????},
????????????getList()?{
????????????????console.log(this.listQuery)
????????????????page(this.listQuery).then(response?=>?{
????????????????????this.list?=?response.data.rows;
????????????????????this.total?=?response.data.total;
????????????????})
????????????},
????????????handleSizeChange(val)?{
????????????????console.log(val)
????????????????this.listQuery.limit?=?val;
????????????????this.getList()
????????????},
????????????handleCurrentChange(val)?{
????????????????console.log(val)
????????????????this.listQuery.page?=?val;
????????????????this.getList()
????????????},
????????}
????}
</script>
