基本的安裝步驟參考官網(wǎng)https://iview.github.io/docs/guide/install
1逃贝、引入iview的table表格組件
通過(guò)slot-scope="{ row }"將操作按鈕單獨(dú)提出去做，按鈕很多的話也可以將多個(gè)按鈕push進(jìn)一個(gè)數(shù)組中迫摔，然后通過(guò)遍歷渲染到對(duì)應(yīng)的表格中沐扳，分為兩種情況：一種是單個(gè)或者按鈕很少的就直接在template中進(jìn)行操作，另外一種是多個(gè)按鈕句占，需要將其封裝到j(luò)s數(shù)組中沪摄，通過(guò)遍歷數(shù)組去展示操作按鈕。
1.1纱烘、單個(gè)或者按鈕很少的直接操作
組件代碼：
<div class="basic-table">
<!-- 文件數(shù)據(jù)表格 -->
<Table border :context="self" :columns="columns" :data="list">
<template slot-scope="{ row }" slot="fileData">
<Button class="basic-table-btn" type="text" @click="handleShow(row)"
>查看</Button
>
<Button
class="basic-table-btn"
style="margin-left: 20px"
type="text"
@click="handleDown(row)"
>下載</Button
>
</template>
</Table>
<!-- 分頁(yè)組件 -->
<MyPage
:total="total"
:pageSize="pageSize"
@changePage="changePage"
></MyPage>
</div>
<script>
import { systemConstruct } from "./systemConstruct";//解構(gòu)js文件暴露出來(lái)的對(duì)象
import MyPage from "@/components/ckypage/myPage";
export default {
props: ["dataList"],
components: {
MyPage,
},
data() {
return {
self: this,
keyWord: "",
columns: systemConstruct.columns,
list: [],
total: 12,
pageSize: 10,
};
},
mounted() {
this.list = this.dataList;
}
}
systemConstruct.js代碼：
將表格的字段columns單獨(dú)寫(xiě)在一個(gè)js中,新建一個(gè)js文件（比如我的：systemConstruct.js） -> 再將里面的數(shù)據(jù)對(duì)象暴露出去
export const systemConstruct = {
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '文件名稱',
key: 'fileName',
align: 'center',
ellipsis: true,
render: (h, params) => {
// 判斷是否為文件夾
if (params.row.isFloder) {
return h('div', { style: { textAlign: 'left' } }, [
h('icon', {
props: {
type: 'ios-folder'
},
style: {
fontSize: '32px',
color: '#FFC062',
marginRight: '5px'
}
}),
h('span', { style: { fontWeight: 700, fontSize: '15px' } }, params.row.fileName)
])
} else {
return h('div', { style: { textAlign: 'left' } }, [
h('icon', {
props: {
type: 'ios-paper'
},
style: {
fontSize: '26px',
color: '#2D91FF',
marginRight: '5px'
}
}),
h('span', params.row.fileName)
])
}
}
},
{
title: '創(chuàng)建日期',
key: 'creationDate',
align: 'center',
ellipsis: true,
},
{
title: '創(chuàng)建人',
key: 'founder',
align: 'center',
ellipsis: true,
},
{
title: '文件類型',
key: 'fileType',
align: 'center',
ellipsis: true,
},
{
title: '操作',
slot: 'fileData',
align: 'center',
ellipsis: true,
}
]
}
添加圖標(biāo)的核心代碼是該部分的render函數(shù)的代碼杨拐，render函數(shù)返回的是一個(gè)數(shù)組，因此擂啥，我們只需要將icon圖標(biāo)和data數(shù)據(jù)逐個(gè)放入到數(shù)組中即可哄陶。
{
title: '文件名稱',
key: 'fileName',
align: 'center',
ellipsis: true,
render: (h, params) => {
// 判斷是否為文件夾
if (params.row.isFloder) {
return h('div', { style: { textAlign: 'left' } }, [
h('icon', {
props: {
type: 'ios-folder'
},
style: {
fontSize: '32px',
color: '#FFC062',
marginRight: '5px'
}
}),
h('span', { style: { fontWeight: 700, fontSize: '15px' } }, params.row.fileName)
])
} else {
return h('div', { style: { textAlign: 'left' } }, [
h('icon', {
props: {
type: 'ios-paper'
},
style: {
fontSize: '26px',
color: '#2D91FF',
marginRight: '5px'
}
}),
h('span', params.row.fileName)
])
}
}
},
結(jié)果展示.png
1.2、多個(gè)按鈕操作在js中添加按鈕數(shù)組
創(chuàng)建一個(gè)index.js文件哺壶，然后里面寫(xiě)上表格的表頭字段以及按鈕操作的數(shù)組等表格設(shè)置項(xiàng)：
export const noticeManage = {
columns: {
data: [{
title: "序號(hào)",
key: "order",
align: 'center',
},
{
title: "標(biāo)題",
key: "title",
align: 'center',
width: '400'
},
{
title: "類型",
key: "type",
align: 'center',
},
{
title: "時(shí)間",
key: "date",
align: 'center',
},
{
title: "狀態(tài)",
key: "state",
align: 'center',
render(h, params) {
if (params.row.state == 1) {
return h('span', { 'style': { 'color': '#1EAA39' } }, '已置頂')
} else if (params.row.state == 0) {
return h('span', { 'style': { 'color': '#ccc' } }, '未置頂')
}
},
},
{
title: "管理",
slot: 'manage',
width: 260,
align: 'center',
},
{
title: '操作',
slot: 'action',
width: 260,
align: 'center',
}
],
btns: [
{
text: '編輯',
size: 'small',
handleName: 'handleEdit',
},
{
text: '刪除',
size: 'small',
handleName: 'handleRomve',
}
],
}
}
tableSetting.btns為在index.js中的表格的數(shù)組項(xiàng)：
<template>
<div class="basic-table">
<Table border :columns="tableSetting.data" :data="tableData">
<template slot-scope="{ row }" slot="action">
<Button
class="basic-table-btn"
v-for="item in tableSetting.btns"
:key="item.text"
:type="item.type"
style="margin-left: 10px"
@click="handleTable(item.handleName, row)"
>{{ item.text }}</Button
>
</template>
</Table>
<div class="page">
<Page
ref="pages"
:total="totla"
@on-change="changePage"
:page-size="pageSize"
show-total
show-elevator
/>
</div>
</div>
</template>
<script>
export default {
props: ["tableSetting", "tableData", "totla", "pageSize"],
data() {
return {
columns: [],
};
},
mounted() {
console.log(this.tableSetting, this.tableData);
},
methods: {
//分頁(yè)功能的實(shí)現(xiàn)
changePage(index) {
this.$emit("changePage", index);
},
//將表格的點(diǎn)擊事件全部傳出
handleTable(name, row) {
this.$emit(name, row);
},
},
};
</script>
結(jié)果展示.png
