序言
因为公司需要开发一套内部用的管理系统,又没有前端,只能我自己顶上了,百度得来的资料太过繁杂,讲的也不细,在此记录下自己边学边做的东西。为了节约开发时间,我的项目使用的是花裤衩大佬的vue-admin-template
可编辑表格
表格编辑应该是比较常用的功能吧,但是搜了一圈大家都讲的挺简略的,可能真正的开发用封装好的插件比较多吧,以下是我查资历整合来的成果,部分代码如下:
<el-form :model="tableForm" ref="tableForm">
<el-table
:data="tableForm.tableData"
:highlight-current-row='true'
:header-cell-style="headStyle"
:cell-style="cellStyle"
:border="true"
max-height="850"
style="width: 100%"
class="lineSection">
<el-table-column fixed prop="line" label="Line" min-width="55px">
<template slot-scope="scope">
{{scope.$index + 1}}
</template>
</el-table-column>
<el-table-column prop="brand" label="Brand" min-width="100px">
</el-table-column>
<el-table-column prop="monthlyqty" label="Monthly|Quantity" :render-header="renderheader" min-width="100px">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.monthlyqty`" :rules="tableRules.monthlyqty">
<el-input v-show="scope.row.show" v-model="scope.row.monthlyqty"></el-input>
<span v-show="!scope.row.show">{{scope.row.monthlyqty}}</span>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
现阶段的表格差不多就这样吧,说说这里面做了什么 因为elementui官方提供的诸如文本框、下拉框之类的组件,皆为form-item,所以需要在table外层需要包一个form。 当然你可以不包form,如果你不需要对table中的数据做前端校验的话。 这里嵌入了scope,是为了使table处于非编辑状态的时候,作为纯表格展示,而不显示编辑框 大致效果如图: 当需要获取指定单元格的value时
this.tableForm.tableData[index].brand
表格中单元格编辑框切换
各位可以看到,在Part Number一列中,有一个切换按钮,是用于切换Part Number和Series的,在v-if和v-show中犹豫了很久,最终决定使用v-show
<el-table-column prop="pn" label="Part Number / Series" min-width="390px">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.pn`" :rules="tableRules.pn">
<label v-show="tableForm.tableData[scope.$index].pnType === 'pn'" style="margin-right: 5px;">P:</label>
<el-select style="width: 80%;" placeholder="" v-show="scope.row.show && tableForm.tableData[scope.$index].pnType === 'pn'"
v-model="scope.row.pn" filterable @change="autofillbrand($event, scope.$index)">
<el-option v-for="item in displayOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<label v-show="tableForm.tableData[scope.$index].pnType === 'series'" style="margin-right: 5px;">S:</label>
<el-select style="width: 80%;" placeholder="" v-show="scope.row.show && tableForm.tableData[scope.$index].pnType === 'series'" v-model="scope.row.series" filterable>
</el-select>
<el-button class="pnswitchbtn" size="medium" icon="el-icon-refresh" style="margin-left: 5px;" @click="switchpns(scope.$index)" circle></el-button>
<span v-show="!scope.row.show">{{scope.row.pn}}</span>
</el-form-item>
</template>
</el-table-column>
js部分:
switchpns(index){
console.log(this.tableForm.tableData)
if(this.tableForm.tableData[index].pnType === 'pn'){
this.tableForm.tableData[index].pnType = 'series'
this.tableForm.tableData[index].brand = ''
this.tableForm.tableData[index].pn = ''
}else{
this.tableForm.tableData[index].pnType = 'pn'
this.tableForm.tableData[index].brand = ''
this.tableForm.tableData[index].series = ''
}
}
原理很简单,设定一个额外的type值去确定指定即可,需要注意的是,必须确切指定到是当前行的type,否则点击按钮会影响到所有行。
根据其中一个单元格的内容,自动填充另一个单元格
autofillbrand(value, index){
let obj={}
obj = this.displayOptions.find((item)=>{
return item.value === value;
});
let getName = ''
let brandtmp = ''
getName = obj.label
for (let i = 0; i < getName.length; i++) {
this.tableForm.tableData[index].brand = brandtmp
...
}
},
以上的displayOptions是Part Number的数据,通过填入的数据,找到对应的object,然后再去获取value,如果你的数据value和label一致,其实不用这么麻烦orz,我是需要对label值做一些规则校验,再回怼到brand里面。
样式穿透
这个应该是为了避免样式污染,如
.lineSection /deep/ .pnswitchbtn { color: #FF8C00; }
lineSection是table的class, /deep/为穿透用法,看官方文档有三种写法,但我的程序中不知为何只有这个能生效