前言：
正好这个项目用到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>