本人第一次写这个写的不好还望指出来
作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员!
公司做的数据管理系统所以离不开表格了然后表格样式统一啥的就想到封装一个element-ui里面+分页的表了
效果图
表格组件的引入与使用
& lt; com-table title=凹嗖馐荨皏模型=皌ableData4 @selection-change”=癶andleSelectionChange”比;
& lt; template>
& lt; el-table-column type="选择"宽度=" 55 "对齐=爸行摹北?
& lt;/el-table-column>
& lt; el-table-column道具=懊帧北昵?氨砀衩啤岸云?爸行摹北?
& lt;/el-table-column>
& lt; el-table-column标签=安狻钡愣云?爸行摹北?
& lt;模板slot-scope=v=皊cope.row.point.visible”比“范围”;
& lt; el-input v模型=" scope.row.point。价值”占位符="请输入内容" @focus=" focuspoint (scope.row.point)”祝辞& lt;/el-input>
& lt;/template>
& lt;/el-table-column>
& lt; el-table-column标签="项目”=爸行摹痹诙云?
& lt;模板slot-scope=v=皊cope.row.item.visible”比“范围”;
& lt; el-input v模型=" scope.row.item。价值”占位符="请输入内容" @focus=" focusitem (scope.row.item)”祝辞& lt;/el-input>
& lt;/template>
& lt;/el-table-column>
& lt;/template>
& lt;/com-table>
使用插槽槽使用起来就和原来的表一样了
从“@/组件/共同/进口comTable com-table”
从“进口{GetTempletExportList, GetTempletExportInfo} . ./. ./. ./api/转移/指数”
从“@/api/ApiConfig”进口ApiConfig
出口默认{
名称:“模板”,
组件:{
comTable
}，
数据(){
返回{
tableData4: [],
exporttableData: [],
multipleSelection: [],
currentpoint:空,
currentitem:空,
itemdialogshow:假的,
pointdialogshow:假的,
.SysPath .GetConfig路径:新ApiConfig () (),//选checkeditem:[],中数据
}
}，
计算:{
moduletype () {
返回这个。store.state.moduletype美元;
}，
用户信息(){
返回这个。store.state.user.userInfo美元;
}
}，
看:{
moduletype () {
this.init ();
}
}，
创建(){
this.init ();
}，
方法:{
init () {
GetTempletExportList (this.userinfo。cityid this.moduletype)。然后(re=比;{
这一点。exporttableData=https://www.yisu.com/zixun/re.data;
这一点。tableData4=[];
re.data。地图(项=> {
this.tableData4.push ({
名称:item.fldTableDesc,
点:{
可见:假的,
价值:“
}，
项目:{
可见:没错,
价值:item.ItemList
}
}）
}）
},(错误)=比;{
美元。消息({
customClass:“el-message_new”,
信息:错误,
类型:“错误”
}）;
}）
}，
handleSelectionChange (val) {
console.log (val)
这一点。multipleSelection=val;
}，
focuspoint (val) {
这一点。currentpoint=val;
}，
focusitem (val) {
这一点。currentitem=val;
这一点。itemdialogshow=true;
}，
itemconfirm () {
这一点。itemdialogshow=! this.itemdialogshow;
}，
itemhandleClose(做){
这一点。itemdialogshow=false;
}，
ItemGroupSelectchange (val) {
这一点。checkeditem=val;
console.log (this.checkeditem);
让groupitemcontent=[];
val.map(项目=比;{
groupitemcontent.push (item.fldItemName);
}）
this.currentitem。值=https://www.yisu.com/zixun/groupitemcontent.join (" ");
}，
提交(){
如果(this.multipleSelection。长度比;0){
让消息=" ";
让数据=https://www.yisu.com/zixun/[];
让name=" ";
this.multipleSelection。地图((项目、索引)=比;{=item.name名称;
让str=item.name;
让信息=false;
如果(item.item。可见,,item.item。值=https://www.yisu.com/zixun/=" ") {
消息+=北?$ {str}]请选择因子”;
信息=true;
}
如果(item.point。可见,,item.point。值=https://www.yisu.com/zixun/=" ") {
如果(信息){
消息+=?请选择测点/断面!”;
其他}{
消息+=北?$ {str}]请选择测点/断面!”;
}
信息=true;
}
如果(信息){
消息+=& lt; br/祝辞;“
}
data.push ({
“AutoID”:“1”,
“STCode”:“”,
“PCode”:“”,
“RCode”:“”,
“RScode”:“”,
“GDCODE”:“”,
“类型”:this.moduletype,
“itemcodeList”: item.item.value.split (" ") . join (' ^ '),
“路径”:“$ {this.path.TempletExportSetting} $ {this.moduletype} . json ',
“IsNeedNullData”:“Y”
}）
}）
如果(消息==" "){
GetTempletExportInfo(数据)。然后(re=比;{
如果(re.status==皁k”) {
var exportdata=https://www.yisu.com/zixun/eval ((re.data));
const {export_json_to_excel}=要求(“. ./. ./. ./libs/Export2Excel”);
如果(exportdata [0] .merg。长度!=0){
var exdata=https://www.yisu.com/zixun/[];
var itemlistUnit=[];
var itemlistfldCharCode=[];
(var z=0;z
