树结构表格的懒加载和多选
使用Vue + element-ui 的 table 需要用到树结构表格的懒加载和多选
后面有完整代码 可直接运行
懒加载按文档添加 lazy 和 :load="load" 就可以 多选直接按照官网是的例子写
<el-table>
<el-table-column type="selection">
</el-table-column>
.......
</el-table>
在表格前插入一列 设置 type="selection"
不需要全选反选的 可以通过header-cell-style来设置表头
:header-cell-style="handerMethod"
// 合并表头 不显示第一列的表头
handerMethod({ row, column, rowIndex, columnIndex }) {
if (row[0].level == 1) {
row[0].colSpan = 0;
row[1].colSpan = 2;
if (columnIndex === 0) {
return { display: "none" };
}
}
},
//懒加载函数
load(tree, treeNode, resolve){
// 存储数据 记录当前点击行的ID 和 当前行懒加载参数
// 存起来 在修改和删除 表格行时需要用到
this.maps.get('tree.id',{tree, treeNode, resolve})
value= {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
tag: '公司'
}
resolve(value)
// 使用set更新页面数据
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.carCode, value)
}
<template>
<div class="tableColumn">
<el-table
fit
@select="selectChange"
:data="tableList"
ref="table"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:header-cell-style="handerMethod"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column type="selection" width="40"> </el-table-column>
<el-table-column prop="name" align="center" label="姓名">
</el-table-column>
<el-table-column prop="province" label="城市" align="center">
</el-table-column>
<el-table-column prop="carState" label="状态" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.carState"
active-color="#16CD65"
@change="btnswitch(scope.row)"
inactive-color="#ccc"
>
</el-switch>
<span v-show="!scope.row.carState">停用 </span>
<span v-show="scope.row.carState">启用</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
<template slot-scope="scope">
<span v-show="!scope.row.zip">{{ scope.row.address }}</span>
<el-input
v-model="scope.row.address"
v-show="scope.row.zip"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="200px" align="center">
<template slot-scope="scope">
<el-button
v-show="!scope.row.zip"
@click="scope.row.zip = true"
type="text"
size="mini"
>修改</el-button
>
<el-button
v-show="scope.row.zip"
@click="scope.row.zip = false"
type="text"
size="mini"
>完成</el-button
>
<el-button type="text" size="mini" @click="deleteRow(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<div>
<div><el-input v-show="city" v-model="inputValue"></el-input></div>
<el-button v-show="!city" @click="city = true">批量修改城市</el-button>
<el-button v-show="city" @click="modify">完成</el-button>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
tableList: [
{
name: "朱小明",
id: 1,
zip: false,
type: "father",
province: "上海",
city: "普陀区",
address: `上海市普陀区金沙江路 ww 弄`,
hasChildren: true,
},
{
name: "蘑菇头",
id: 2,
zip: false,
type: "father",
province: "上海",
city: "普陀区",
address: `上海市普陀区金沙江路 ww 弄`,
},
{
name: "闰土",
id: 3,
zip: false,
type: "father",
province: "上海",
city: "普陀区",
address: `上海市普陀区金沙江路 ww 弄`,
},
],
sunData: [
{
name: "米线",
code: 1,
zip: false,
type: "son",
id: 21,
province: "上海",
city: "普陀区",
address: `上海市普陀区金沙江路 ww 弄`,
},
{
name: "冷萌",
code: 1,
zip: false,
type: "son",
id: 22,
province: "上海",
city: "普陀区",
address: `上海市普陀区金沙江路 ww 弄`,
},
],
maps: new Map(),
city: false,
inputValue: "",
selectList: [],
};
},
mounted() {},
methods: {
modify() {
this.selectList.forEach((item) => {
item.province = this.inputValue;
});
// 发送请求
this.inputValue = ''
this.city = false;
},
// 合并表头
handerMethod({ row, column, rowIndex, columnIndex }) {
if (row[0].level == 1) {
row[0].colSpan = 0;
row[1].colSpan = 2;
if (columnIndex === 0) {
return { display: "none" };
}
}
},
// 表格懒加载
load(tree, treeNode, resolve) {
this.maps.set(tree.id, { tree, treeNode, resolve });
// 这里发送请求 resolve 返回的结果
setTimeout(() => {
resolve(this.sunData);
}, 2000);
// 如果数据返回正确 页面更新 可以使用 $set 更新页面数据
// this.$refs.table.store.states.lazyTreeNodeMap table ref
// tree.id table row-key
// value 更新的数据
// this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, value)
// 或者 给 table 添加 key 强制刷新表格
},
selectChange(value) {
this.selectList = value;
console.log(value);
},
details(row) {
console.log(row, "修改");
},
deleteRow(row) {
// 我这里是本地演示 所以直接修改 resolve 的数组
// 为了方便这里我直接修改了 子级数组 实际是需要判断
this.sunData.splice(0, 1); // 实际这一行是不需要的
const { tree, treeNode, resolve } = this.maps.get(row.code);
this.load(tree, treeNode, resolve);
},
btnswitch(row) {
console.log(row, "状态");
},
},
};
</script>
