基本的安装步骤参考官网https://iview.github.io/docs/guide/install
1、引入iview的table表格组件
通过slot-scope="{ row }"
将操作按钮单独提出去做,按钮很多的话也可以将多个按钮push进一个数组中,然后通过遍历渲染到对应的表格中,分为两种情况:一种是单个或者按钮很少的就直接在template
中进行操作,另外一种是多个按钮,需要将其封装到js数组中,通过遍历数组去展示操作按钮。
1.1、单个或者按钮很少的直接操作
组件代码:
<div class="basic-table">
<!-- 文件数据表格 -->
<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>
<!-- 分页组件 -->
<MyPage
:total="total"
:pageSize="pageSize"
@changePage="changePage"
></MyPage>
</div>
<script>
import { systemConstruct } from "./systemConstruct";//解构js文件暴露出来的对象
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单独写在一个js中,新建一个js文件(比如我的:systemConstruct.js
) -> 再将里面的数据对象暴露出去
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: '创建日期',
key: 'creationDate',
align: 'center',
ellipsis: true,
},
{
title: '创建人',
key: 'founder',
align: 'center',
ellipsis: true,
},
{
title: '文件类型',
key: 'fileType',
align: 'center',
ellipsis: true,
},
{
title: '操作',
slot: 'fileData',
align: 'center',
ellipsis: true,
}
]
}
添加图标的核心代码是该部分的render函数的代码,render函数返回的是一个数组
,因此,我们只需要将icon
图标和data
数据逐个放入到数组中即可。
{
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)
])
}
}
},
1.2、多个按钮操作在js中添加按钮数组
创建一个index.js文件,然后里面写上表格的表头字段以及按钮操作的数组等表格设置项:
export const noticeManage = {
columns: {
data: [{
title: "序号",
key: "order",
align: 'center',
},
{
title: "标题",
key: "title",
align: 'center',
width: '400'
},
{
title: "类型",
key: "type",
align: 'center',
},
{
title: "时间",
key: "date",
align: 'center',
},
{
title: "状态",
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
中的表格的数组项:
<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: {
//分页功能的实现
changePage(index) {
this.$emit("changePage", index);
},
//将表格的点击事件全部传出
handleTable(name, row) {
this.$emit(name, row);
},
},
};
</script>