Vuex在element-ui中的运用
简单实现效果如下
勾选的是已完成的数据,去掉勾选则放到未完成处,展示个动态总数
代码如下:
以下为index.js中的代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//原始数据list,也可以在mutations中获取获取后端数据
list: [{
id: '0',
name: '王2',
state: 'true'
},
{
id: '1',
name: '王3',
state: 'true'
},
{
id: '2',
name: '王6',
state: 'false'
},
{
id: '3',
name: '王4',
state: 'false'
},
{
id: '4',
name: '王7',
state: 'false'
},
{
id: '5',
name: '王8',
state: 'false'
},
{
id: '6',
name: '王9',
state: 'false'
}
],
//默认选择的是全部状态
key: 'all'
},
mutations: {
add(state, value) {
state.list.push(value)
},
del(state, value) {
const t = state.list.findIndex(x => x.id === value)
if (t !== -1) {
state.list.splice(t, 1)
}
},
//点击前面的复选框,有勾代表完成,没勾代表未完成
change(state, event) {
//在list中查找id=传过来参数的id
const t = state.list.findIndex(x => x.id === event.id)
if (t !== -1) {
if (event.state === 'true') {
state.list[t].state = 'false'
} else {
state.list[t].state = 'true'
}
}
},
//不能直接修改state,要通过mutations修改
changeView(state, value) {
state.key = value
}
},
actions: {},
getters: {
//根据选择展示不同内容
getListIn(state) {
if (state.key === 'all') {
return state.list
} else if (state.key === 'yes') {
//返回list中的state=true的数据,跟state好像重名了,知道什么意思就行,不改了
return state.list.filter(x => x.state === 'true')
} else if (state.key === 'no') {
//返回list中的state=false的数据,跟state好像重名了,知道什么意思就行,不改了
return state.list.filter(x => x.state === 'false')
}
}
},
modules: {}
})
调用页面代码如下:
<template>
<div>
<div style="height:300px;width:800px;margin:0 auto;">
<div>
请输入内容:<el-input
type="text"
placeholder="请输入内容"
v-model="value"
style="width: 75%; margin-top: 20px"
>
</el-input>
<el-button
type="primary"
round
style="float: right; margin-top: 20px"
@click="add"
>增加</el-button
>
</div>
<div style="width: 100%; margin-top: 20px; border: 1px solid #000">
<el-table
ref="multipleTable"
:data="getListIn"
tooltip-effect="dark"
style="width: 100%"
@select="changeState"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="name" label="数据" width="120">
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button @click="del(scope.row)"> 移除 </el-button>
</template>
</el-table-column>
</el-table>
<h4>总数为{{ list.length }}</h4>
<div style="margin-top: 20px; text-align: center">
<el-button-group>
<el-button
:type="key === 'all' ? 'primary' : 'default'"
@click="changeView('all')"
>全部</el-button
>
<el-button
:type="key === 'yes' ? 'primary' : 'default'"
@click="changeView('yes')"
>完成</el-button
>
<el-button
:type="key === 'no' ? 'primary' : 'default'"
@click="changeView('no')"
>未完成</el-button
>
</el-button-group>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
data() {
return {
id: '7',
value: '121',
multipleSelection: []
}
},
mounted() {
for (const i in this.getListIn) {
if (this.getListIn[i].state === 'true') {
this.$refs.multipleTable.toggleRowSelection(this.getListIn[i], true)
}
}
},
computed: {
...mapState(['list', 'key']),
...mapGetters(['getListIn'])
},
methods: {
...mapMutations(['add', 'del', 'changeView']),
add() {
const ct = {
id: this.id++,
name: this.value,
state: 'false'
}
this.$store.commit('add', ct)
},
del(row) {
const i = row.id
this.$store.commit('del', i)
},
changeState(selection, row) {
this.$store.commit('change', row)
},
changeView(key) {
this.$store.commit('changeView', key)
}
},
watch: {
//监听getListIn数据变化,进行重新勾选
getListIn: {
handler(newVal) {
for (const i in newVal) {
if (newVal[i].state === 'true') {
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(
this.getListIn[i],
true
)
})
//这种方式勾选渲染无效,得用this.$nextTick
//this.$refs.multipleTable.toggleRowSelection(this.getListIn[i], true)
}
}
},
deep: true
}
}
}
</script>