先看效果
选择前
选择后
实现过程
页面内容（user.vue）
-
template代码
<template>
<!---页头包裹-->
<PageHeaderWrapper :title="false">
<!--全局操作表格的容器-->
<div class="table-header">
<a-space :size="16" class="button-group">
<a-button type="primary">
<a-icon type="plus"/>
新增用户
</a-button>
<a-button type="default" :disabled="disabled">批量删除</a-button>
<a-button>
<a-space>
<importuser :width="18" :height="18"/>
<span>导入用户</span>
</a-space>
</a-button>
</a-space>
<div class="search-input" >
<a-input-search
placeholder="账号搜索"
style="width: 200px"
@search="onSearch"
/>
</div>
</div>
<!--全局操作容器到此结束-->
<br>
<!---表格用card包裹在方便在表格外面写东西-->
<a-card>
<!--全选框-->
<a-checkbox
@change="onSelectAll($event)"
>
选择全部 <em class="len">{{this.userlist.length}}</em> 条
</a-checkbox>
<!--全选框结束-->
<a-table
:columns="columns"
:data-source="userlist"
:row-selection="rowSelection"
:rowKey="record => record.id"
class="usertable"
ref="table"
>
<!--表格，space包裹的操作的图标，这个可以自己替换-->
<a-space slot="action" :size="18">
<a><chakan :width="18" :height="18"/></a>
<a><edit :width="18" :height="18"/></a>
<a><deleteicon :width="18" :height="18"/></a>
</a-space>
</a-table>
</a-card>
</PageHeaderWrapper>
</template>
-
script代码
<script>
// 对应template中的页头，antd组件
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout';
// 这个是自己找的一些svg图标改写成的组件，方便自定义，也可以使用antd的icon代替这些（没必要写成组件）
import {
importuser,
chakan,
edit,
deleteicon,
} from '@/core/icons';
// 引入gutter（获取state）
import { mapGetters } from 'vuex';
// 表头
const columns = [
{
title: '账号',
dataIndex: 'logingId',
key: 'logingId',
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '部门',
dataIndex: 'departmentFullName',
key: 'departmentFullName',
},
{
title: '到期时间',
key: 'expirationDate',
dataIndex: 'expirationDate',
},
{
title: '停用/启用',
key: 'userState',
dataIndex: 'userState',
},
{
title: '查看/编辑/删除',
ket: 'action',
scopedSlots: { customRender: 'action' },
},
];
export default {
// 使用引入的组件
components: {
PageHeaderWrapper,
importuser,
chakan,
edit,
deleteicon,
},
// 在create之前派发出
beforeCreate() {
this.$store.dispatch('GetUserList');
},
// 数据 @columns:页头，@selectedRowKeys:选中的id，@selectedRows:选中的数据
data() {
return {
columns,
selectedRowKeys: [],
selectedRows: [],
};
},
// 计算属性，同步数据处理
computed: {
// 遍历gutters,获取state中的userlist
...mapGetters([
'userlist',
]),
// table组件的api：row-selection的值，目前用到的selectedRowKeys（数组）和onChange(方法)
rowSelection() {
// rowSelection放在计算属性里的原因是：要根据选择项更改 data 中的 selectedRowKeys且同步，如果要实现异步加载可以放到watch属性里
const { selectedRowKeys } = this;
return {
selectedRowKeys,
onChange: this.onSelectChange,
};
},
// disabled 用来控制批量操作的disabled属性，当选择的数目不为0激活按钮
disabled() {
if (this.selectedRowKeys.length !== 0) {
return false;
}
return true;
},
},
// 方法
methods: {
// 搜索
onSearch(value, $event) {
console.log(value, $event);
},
// rowSelection中的选择方法
onSelectChange(selectedRowKeys, selectedRows) {
// 选中后更改selectedRowKeys的值
this.selectedRowKeys = selectedRowKeys;
console.log(selectedRowKeys, selectedRows);
},
// 全选操作
onSelectAll($event) {
// 我在这里监听的事件，应该有更好的方法
if ($event.target.checked) {
this.selectedRowKeys = this.userlist.map((item) => item.id);
this.selectedRows = this.userlist;
} else {
this.selectedRowKeys = [];
this.selectedRows = [];
}
},
},
};
-
style代码
<style lang="less">
.ant-dropdown-link{
color: red;
}
a {
color: gray;
&:hover {
color: gray;
}
}
.len {
color:#096dd9 !important;
}
.table-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding: 20px 30px 20px 20px;
background-color: #fff;
border-radius: 2px;
}
.usertable {
.ant-table-tbody {
background: #fff;
}
}
.search-input {
display: inline-block;
}
</style>
store 中的内容
-
index.js(主容器，创建store)
// 导入vue和vuex
import Vue from 'vue';
import Vuex from 'vuex';
// userdata 用来储存user页面的state和更改状态的方法，这里可以创建一个目录储存不同页面的state，调用方便也好改
import userdata from './modules/userdata';
// 放gutter方法的（state的返回值）
import getters from './getters';
// 导入后使用Vuex
Vue.use(Vuex);
// 创建Vuex实例
export default new Vuex.Store({
// Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
modules: {
// 这里的功能和vuex中的方法和state都是一样的，如果内容少的话，直接写在实例中也可以
userdata,
},
state: {
// 状态
},
mutations: {
// 提交(同步,直接更改状态,写type(跟redux中的action.type一样))
},
actions: {
// 提交(异步,提交mutations)
},
getters, // 返回更改后的state，在页面中通过 mapGetters获取
/**
...mapGetters([
'gutter中的state名字'
])
*/
});
-
modules/userdata.js
// 这里是api请求的整合模块原方法如下
/**
import request from '@/utils/request';
export const getUserList = () => request({
method: 'get',
url: '你的接口地址',
});
*/
// 如果你的请求很少，可以在此页面直接引入axios这些网络请求工具，自己写一下网络请求，然后直接调用getUserlist方法
import * as usermanage from '@/api/user';
// 导出模块的名字
const userdata = {
// state,可包含多个
state: {
userlist: [],
},
// 因为要通过接口更改state所以这里定义了一个type，你也可以直接在这里同步更改state
mutations: {
SET_USERLIST: (state, userlist) => {
state.userlist = userlist;
},
},
// 提交type
actions: {
// 这个是就是user.vue中派发的方法
GetUserList({ commit }) {
return usermanage.getUserList().then((res) => {
if (res.code === 200) {
// console.log(res.data);
commit('SET_USERLIST', res.data.totalList);
}
});
},
},
};
export default userdata;
-
gutters.js
const getters = {
userlist: (state) => state.userdata.userlist,
};
export default getters;
总结
- 实现antd for vue的可控全选，方法不唯一，一定有更好的实现方法
- 一些可参考的连接：
vuex可以看看mutation和Action: https://vuex.vuejs.org/zh/guide/state.html
antd的table筛选api:https://antdv.com/components/table-cn/#rowSelection
