1、表格多选、表格背景色设置
<el-table :data="allData" class="table-bg" @selection-change="handleSelectionChange">
</el-table>
=================================
data() {
return {
multipleSelection: [], //被选中的对象数组
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val
console.log(val)
},
}
=================================
<style lang="less" scoped>
// table背景色
/deep/.table-bg tr {
background-color: #fff;
}
<style>
2、表格内容 slot 修改
<el-table :data="allData" class="table-bg" style="width: 100%; font-size: 14px;color: #646A73;":header-cell-style="{ background: '#FFF' }">
<el-table-column prop="id" label="ID" />
<el-table-column prop="aaa" label="选中">
<template #default="{ row }">
<input type="checkbox" name="" class="check_box tui-checkbox" @click=""
:checked="row.aaa">
</template>
</el-table-column>
</el-table>
3、表格表头 slot 修改表头样式：label+img
表头点击，二级下拉框显示，实现筛选
slot=“header” slot-scope=“{column}”
<el-table :data="allData" >
<el-table-column prop="catName" label="分类" width="120">
<template slot="header" slot-scope="{column}">
<div class="type-text">
<span @click="clickType">{
{
column.label }}</span>
<img style="padding-left:8px;height:14px;width:10px;" src="@/assets/images/icon_travel_select.png" alt="">
<el-select @change="getCatId" class="select-type" style="display:none;" popper-class="eloption popper-select"
:popper-append-to-body="true" v-model="selectCatName" placeholder="请选择分类">
<el-option-group v-for="group in filterTypeArr" :key="group.catId" :label="group.catName">
<el-option v-for="item in group.child" :key="item.catId" :label="item.catName" :value="item.catName">
</el-option>
</el-option-group>
</el-select>
</div>
</template>
</el-table-column>
</el-table>
================================
data() {
return {
allData:[],
selectCatName: '',
catId:'',
filterTypeArr: [],
}
}
clickType() {
let qsType = document.querySelector('.select-type')
qsType.click();
},
getCatId() {
let item = {
catIcon: "",
catId: "000",
catName: "",
child: [{
catIcon:"",
catId:"0000",
catName:"全部",
parentId:"000"
}]
}
this.filterTypeArr.push(item)
console.log("111----",this.selectCatName)
if(this.selectCatName == '全部'){
this.catId = ''
}else{
this.filterTypeArr.forEach(v => {
v.child.forEach(x => {
if (x.catName == this.selectCatName) {
this.catId = x.catId
return
}
})
})
}
this.getAllData() //重新异步获取表格数据allData
},
===============================
4、表格筛选
两个 slot-scope 情况设置名称
<el-table @filter-change="filterChange" :data="allData">
<el-table-column prop="state" label="状态" width="120" :filter-multiple="false" :column-key="'state'"
:filters="filterStatusArr">
<template slot="header" slot-scope="{column}">
<div class="type-text">
<span>{
{
column.label }}</span>
<img style="padding-left:8px;height:14px;width:10px;" src="@/assets/images/icon_travel_select.png" alt="">
</div>
</template>
<template slot-scope="scope">
<span :class="scope.row.state === '状态1' ? 'state' : 'state state4'">{
{
scope.row.state }}</span>
</template>
</el-table-column>
</el-table>
======================================
data() {
return {
filterStatusArr: [
{
text: '状态1', value: '0' },
{
text: '状态2', value: '1' },
],
}
}
filterChange(filters) {
// 一个表格两个筛选的情况
// console.log("filterChange1--",filters.catId[0]);
// console.log("filterChange2--",filters.state[0]);
// if (filters.catId) {
// if (filters.catId[0] == undefined) {
// this.catId = ''
// } else {
// this.catId = filters.catId[0]
// }
// }
if (filters.state) {
if (filters.state[0] == undefined) {
this.state = ''
} else {
this.state = filters.state[0]
}
}
this.getAllData()
},
5、表格动态加载列
简易实现了加载两列（多列需要优化）
<el-table-column v-for=" (spec, index) in specList" :key="index" :label="spec.specName">
<template #default="{ row }">
<span v-if="index === 0">{
{
row.col0 }}</span>
<span v-else-if="index === 1">{
{
row.col1 }}</span>
</template>
</el-table-column>
6、表格弹窗，el-popover的使用
<el-table-column prop="pooup" label="弹窗" align="center" width="100">
<template slot-scope="scope">
<!-- trigger="hover" 鼠标hover出现弹窗 -->
<el-popover ref="popoverRef" placement="bottom">
<div class="pp">
<div class="pop">
<el-select class="adult-select" v-model="nameAa" placeholder="请选择">
<el-option v-for="(item, index) in dataList" :key="item.id" :label="item.name"
:value="item.name">
</el-option>
</el-select>
<!-- v-model.trim 去空格 -->
<input :disabled="nameAa=='aa'" type="text" v-model.trim="port.postNum" placeholder="请输入" />
</div>
<div class="pc">
<span @click="clearParams" class="pop-cancel">×</span>
<!-- color:#4F9884; -->
<span class="pop-cancel">√</span>
</div>
</div>
<!-- slot---表格中显示的内容 -->
<div slot="reference" class="name-wrapper">
<div class="item-edit hh">
<img class="img-edit" src="@/assets/images/icon.png" alt="">
<span class="span-edit">点击进行操作</span>
</div>
</div>
</el-popover>
</template>
</el-table-column>
注：el-popover使用doclose关闭窗口不生效解决办法：
handleConfirm() {
document.body.click() // 模拟点击页面其它部分关掉弹层，因为该页面列表使用懒加载导致doClose无效
}
7、过滤删除某项
//obj 为已知对象
this.allData = this.allData.filter(v => v.id !== obj.id)
参考：