前言：
正好這個項目用到iview的table，之前有封裝的element的table，這裏把iview的也封裝下，提高複用性和價值。
首先：我們的公共組件ctable.vue
<template>
<Table
:width='width'
:height='height'
:stripe='stripe'
:border='border'
:disabled-hover='disabledHover'
:highlight-row='highlightRow'
:columns="columns"
:data="list"
@on-selection-change="seclectChange"
@on-row-click='rowClick'
@on-row-dblclick='rowdblclick'
@on-current-change='currentChange'
@on-select-all='selectAll'
@on-select-all-cancel='selectAllCancel'
@on-sort-change='sortChange'
@on-filter-change='filterChange'
>
<!-- 定義slot部分 -->
<template slot-scope="{ row, index }" slot="operation">
<Button size="small" type="primary" @click="clickBJ(row)">編輯</Button>
</template>
<template slot-scope="{ row, index }" slot="operationT">
<Button size="small" type="primary" @click="clickZX(row)" style="margin-right:5px;">執行</Button>
<Button size="small" type="primary" @click="clickTJ(row)">統計</Button>
</template>
</Table>
</template>
<script>
export default {
name:'iview-table',
props:{
columns: Array, // 表頭數據
list: Array, // 表格數據
width: [Number, String],//表格寬度
height: [Number, String],//表格高度，單位 px，設置後，如果表格內容大於此值，會固定表頭-***注意傳進來是number的有滾動條，px的沒有
stripe: { // 是否顯示間隔斑馬紋
type: Boolean,
default: false
},
border: { // 是否顯示縱向邊框
type: Boolean,
default: false
},
disabledHover: { // 禁用鼠標懸停時的高亮
type: Boolean,
default: false
},
highlightRow: { // 是否支持高亮選中的行，即單選
type: Boolean,
default: false
}
},
data () {
return {
};
},
methods:{
/**
* 自帶事件
*/
rowClick(data,index){//單擊某一行時觸發,data==當前行數據，index==當前行的下標
let str={
'data':data,
'index':index
}
this.$emit("rowClick",str)
},
rowdblclick(data,index){//雙擊擊某一行時觸發,data==當前行數據，index==當前行的下標
let str={
'data':data,
'index':index
}
this.$emit("rowdblclick",str)
},
currentChange(currentRow,oldCurrentRow){//開啓 highlight-row 後有效，當表格的當前行發生變化的時候會觸發,currentRow==當前高亮行數據，oldCurrentRow==上次高亮行數據
let str={
'data':currentRow,
'oldData':oldCurrentRow
}
this.$emit("currentChange",str)
},
seclectChange(selection){//在多選模式下有效，只要選中項發生變化時就會觸發,selection==已選項數據
let str={
'data':selection
}
this.$emit("selectionData",str)
},
selectAll(selection){//在多選模式下有效，點擊全選時觸發,selection：已選項數據
let str={
'data':selection
}
this.$emit("selectAll",str)
},
selectAllCancel(selection){//在多選模式下有效，取消點擊全選時觸發,selection：已選項數據
let str={
'data':selection
}
this.$emit("selectAllCancel",str)
},
sortChange(column,key,order){//排序時有效，當點擊排序時觸發,column==當前列數據,key==排序依據的指標,order==asc/desc
let str={
'column':column,
'order':order,
'key':key
}
this.$emit("sortChange",str)
},
filterChange(column){//篩選時有效，篩選條件發生變化時觸發,column==當前列數據
let str={
'column':column
}
this.$emit("filterChange",str)
},
/**
* slot事件
*/
clickBJ(data){//編輯點擊事件
this.$emit("clickBJ",data)
},
clickZX(data){//編輯執行事件
this.$emit("clickZX",data)
},
clickTJ(data){//編輯統計事件
this.$emit("clickTJ",data)
}
}
}
</script>
其次：就是調用部分，我這裏簡單說下里面的步驟，最底下會把完整的調用代碼貼上的，方便直接用，
1、template部分：
2、script-data部分：
3、script-method部分：
接下來貼一下調用部分的完整代碼：
<template>
<div>
<CTable
:columns='this.dyydyl.col'
:list='this.dyydyl.list'
:height='this.dyydyl.height'
:stripe='this.dyydyl.stripe'
@clickBJ='clickBJ'
@clickZX='clickZX'
@clickTJ='clickTJ'
></CTable>
</div>
</template>
<script>
import CTable from '@/components/comIview/ctable'//iview-table
export default {
name:'moral',//道德講堂
props:[''],
data () {
return {
dyydyl:{//黨員一帶一路
height:280,
stripe:true,//斑馬紋
col:[
// {//是否顯示序號-不分頁
// type: 'index',
// width: 60,
// align: 'center'
// },
// {//是否顯示覆選框
// type: 'selection',
// width: 60,
// align: 'center'
// },
{//是否顯示序號-分頁
title: '序號',
width: 50,
align: 'center',
render: (h,params) => {
let rows = this.searchDTO.pageParamers.rows;//page每頁展示多少條
let page = this.searchDTO.pageParamers.page;//page當前頁碼
return h('span',params.index + (rows*(page-1)+1))
}
},
{
title: '黨員',
key: 'dy',
align: 'center',
width: 80,
},
{
title: '等級',
key: 'dj',
align: 'center',
width: 80,
render: (h, params) => {//render函數,iview這裏可以直接用
let dj = params.row.dj;//params.row.dj==獲取到的值
let style={};
if(dj == '一般'){
style.color = '#00fffc';
}else if(dj == '重大'){
style.color = '#ff5816';
}else if(dj == '緊急'){
style.color = '#ffc000';
}
return h('div', {
style:style
} ,params.row.dj)
}
},
{
title: '目標',
key: 'mb',
align: 'center',
width: 'auto',
},
{
title: '操作',
slot: 'operationT',
align: 'center',
width: 'auto',
},
{
title: '操作',
slot: 'operation',
align: 'center',
width: 'auto',
},
//這裏在加個在頁面通過render渲染兩個按鈕的方法
// {
// title: '培訓地點',
// align: 'center',
// width: 'auto',
// render: (h, params) => {
// return h("div", [
// h(
// "Button",
// {
// props: {
// type: "primary",
// size: "small"
// },
// style: {
// marginRight: "5px"
// },
// on: {
// click: (e) => {
// e.stopPropagation();//阻止冒泡
// alert('查看');
// }
// }
// },
// "查看"
// ),
// h(
// "Button",
// {
// props: {
// type: "primary",
// size: "small"
// },
// style: {
// marginRight: "5px"
// },
// on: {
// click: (e) => {
// e.stopPropagation();//阻止冒泡
// alert('刪除');
// }
// }
// },
// "刪除"
// )
// ]);
// }
// },
],
list:[
{
'dy': '陳盛澤',
'dj': '一般',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '重大',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '緊急',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '一般',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '重大',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
{
'dy': '張盛澤',
'dj': '黨員',
'mb': '爭取在年底前超額完成任務',
},
]
},
};
},
components: {
CTable
},
computed: {},
beforeMount() {},
mounted() {},
methods: {
clickBJ(){
alert('編輯');
},
clickZX(){
alert('執行');
},
clickTJ(){
alert('統計');
},
},
watch: {}
}
</script>
<style lang='' scoped>
</style>