elementUI的el-table和el-checkbox组合形成表格多选框看下效果
我这⾥实则⽤到了el-dialog、el-table和el-checkbox，主要的是el-table和el-checkbox。
<el-dialog
title="简号表"
:visible.sync="showJhTable"
width="100%"
class="jhbdia"
top="1vh"
@closed="clearJh"
>
<el-checkbox-group v-model="selectJh" :min="0" :max="1">
<el-table
:data="jhData"
:header-cell-
:show-header="false"
>
<el-table-column
width="75"
align="left"
v-for="num in 20"
:key="num"
>
<template slot-scope="scope" v-if="w.length >= num">
<el-checkbox
:label="w[num - 1].jh"
:key="w[num - 1].jh"
>
{{ w[num - 1].jh }}
</el-checkbox>
</template>
</el-table-column>
</el-table>
</el-checkbox-group>
<span slot="footer" class="dialog-footer">
<el-button @click="tjJh" type="primary">提交</el-button>
<el-button @click="showJhTable = false">返回</el-button>
</span>
</el-dialog>
<script>
import {
get as httpGet,
delete_ as httpDelete,
post as httpPost,
backend_url,
get_by_url,
download as httpDownload,
upload as uploadHeaders,
} from "@/xxxxxx/request";
import { get as getZone } from "@/xxxxxx/zone";
export default {
data() {
return {
ztId: "",
showJhTable: false,
selectRow: "",
selectIndex: 0,
jhData: [],
selectJh: [],
};
},
computed: {
},
created() {
const currentZone = getZone();
const u = backend_url("/punisher/kqjhsz/selectAll");
u.searchParams.append("ztId", Id);
get_by_url(u)
.then((rst) => {
this.jhData = rst;
})
.catch((e) => this.$(e.message));
},
methods: {
showJh(row, index) {
// console.log("row=", row, index);
this.selectRow = row;
this.selectIndex = index;
this.showJhTable = true;
var jhs = [];
for (let i = 0; i < this.jhData.length; i++) {
this.jhData[i].map((x) => x.jh).forEach((x) => jhs.push(x));      }
var jh = lls[this.selectIndex].value;
if (jhs.includes(jh)) {
this.selectJh = [jh];
} else {
this.selectJh = [];
}
},
tjJh() {
var ol = lls[this.selectIndex].value;
if (this.selectJh.length == 1) {
var ne1 = this.selectJh[0];
// console.log(ol, ne1);
if (ol != ne1) {
// console.log("需要改变");
httpPost(`/punisher/kqlrbm/editRq`, {
id: this.selectRow.id,
index: this.selectIndex,
cells: lls,
value: ne1,
})
.then(() => {
//CurrentChange(this.currentPage);
this.$message.success("保存成功");
})
.catch((e) => this.$(e.message));
} else {
this.$message.info("值没有改变，⽆需更改");
}
} else {
if (ol == "" || ol == null) {
// console.log("原始就是空,⽆需改变");
} else {
// console.log("清空");
httpPost(`/xxxxx/kqlrbm/editRq`, {
ztId: Id,
id: this.selectRow.id,
index: this.selectIndex,
cells: lls,
value: "",
})
.then(() => {
//CurrentChange(this.currentPage);
this.$message.success("保存成功");
})
.catch((e) => this.$(e.message));
}
}
this.showJhTable = false;
},
clearJh() {
this.selectJh = [];
},
},
};
</script>
<style scoped >
htmlborder.el-table >>> th {
background-color: #e4e7ed;
border-top: 1px solid #c0c4cc;
border-right: 1px solid #c0c4cc;
border-bottom: 0.5px solid #c0c4cc;
}
.el-table >>> td {
border-right: 1px solid #c0c4cc;
border-bottom: 0.5px solid #c0c4cc;
}
.el-table >>> td {
padding: 0px;
height: 25px;
font-size: 12px;
}
.
el-table >>> th {
padding: 0px;
font-size: 14px;
height: 30px;
}
#el-pagin >>> * {
font-size: 12px;
}
.el-table >>> th.gutter {
display: table-cell !important;
}
.
el-table >>> thead .el-table-column--selection {
border-left: 1px solid #c0c4cc;
}
.el-table >>> tbody .el-table-column--selection {
border-left: 1px solid #c0c4cc;
}
.el-table >>> tbody td {
border-right: 1px solid #c0c4cc;
border-bottom: 1px solid #c0c4cc;
}
.jhbdia >>> .el-dialog__body {
padding: 0;
}
.jhbdia >>> .el-table__body {
border: 1px solid #c0c4cc;
}
.jhbdia >>> .el-table--border td:first-child .cell {
padding: 0;
}
</style>
el-table从后端返回来的值是List<List<Object>>类型的
完整的业务例⼦
<el-table-column
v-for="count in 31"
:key="count"
:label="`${count}`"
align="center"
width="70"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div
v-if="!sbqk2"
@dblclick="w, count - 1)"
>
{{
}}
</div>
<div v-else>
{{
}}
</div></template
>
</el-table-column>
v-if="!sbqk2"⽤这个的原因的数据上报过后不允许再编辑，双击对应的表格，弹出框，选择
岗位⼯资和技能⼯资的表格也有输⼊框，可编辑的，只是去掉输⼊框的样式看起来就像⽂本了<el-table-column
label="技能⼯资"
align="right"
width="110"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-input
v-model="w.kqlrbm.jngz"
class="lrInput"
:readonly="sbqk2"
@focus="w.kqlrbm.jngz)"
@blur="w, w.kqlrbm.jngz)"
/>
</template>
</el-table-column>
.lrInput >>> .el-input__inner {
border: none;
background: none;
outline: none;
padding: 0;
text-align: right;
}
.lrInput >>> .el-input__inner:focus {  border: 1px solid #1890ff;
background-color: #fff;
text-align: left;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。