1.当使用element弄个小表格时，有可能表格每行变得很矮，需要把每行放高一点
每行空隙高度很矮
<el-table
:height="220" :data="data2" ref="multipleTable1"
:row-style="rowStyle"
>
<!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column label="皇后" :show-overflow-tooltip="true" prop="carLicense" min-width="150"></el-table-column>
<el-table-column label="贵妃" :show-overflow-tooltip="true" prop="carTypeDesc" min-width="180"></el-table-column>
</el-table>
使用:row-style="rowStyle"方法给每行增加一个样式，具体使用方式可以查看官网
methods中：
rowStyle ({row, index}) {
return 'height: 22px;'
},
即可，这就会把给每行添加22px的高度
看得不明显，改成30px看下
效果杠杠的
如果想用class控制样式
则在中加入:row-class-name=“rowClass”
<script>
methods {
rowClass ({row, index}) {
return '类型/success'
},
}
<script>
<style>
写个样式，如：
.success {
color: red;
}
</style>
这样应该就可以了。目前版本过低，测试没反应。
2.select下拉框选择时三种获取code和name的方法
<template>
<!--<el-table-column label="装车点" align="center" :show-overflow-tooltip="true" prop="loadStationCode" min-width="80">
<template slot-scope="scope">
<el-select v-model="scope.row.loadStationCode" placeholder="请选择" :label-in-value="true" @change="goCarChange(scope.row)">
<el-option
v-for="item in goCarList"
:key="item.stationCode"
:label="item.stationName"
:value="item.stationCode"></el-option>
</el-select>
</template>
</el-table-column>!-->
// 扩展区 表格中可以这样写,这样就能在表格中进行操作。
</template>
// 法1：用find方法查找赋值
goCarChange (row) {
let _this = this, obj = {};
obj = _this.goCarList.find((item) => {
return item.stationCode === row.loadStationCode
})
row.loadStationName = obj.stationName
}
// 法2：change事件都会有一个默认的参数，就是下拉框的value值
goCarChange (val) { 但是这里特殊处理了就得用row,接收表格中操作的那条数据
let _this = this,
_this.goCarList.forEach(item => {
if (val === item.stationCode) {
// 赋值给你想要的字段
row.loadStationName = obj.stationName
}
如果用row,这里得处理一下
if (item.stationCode === row.loadStationCode) {
row.loadStationName = obj.stationName
}
})
}
// 法3：select下拉框需要改变下格式
<el-form-item label="工艺路径" prop="process_desc" class="ytg-table-tdl tb-require">
<el-select v-model="fundForm.process_desc" clearable size="small" placeholder="请选择" value-key="process_code" @change="goCarChange">
<el-option v-for="(item, index) in processTable" :label="item.process_desc" :key="index" :value="item">
{{item.process_desc}} // 这个貌似可以不要，忘记了
</el-option>
</el-select>
// 此时的value就变成item了，是整个对象，而不是对象里的某一属性，需要加value-key="对象里的code值",
// 在获取的时候： fundForm.process_desc就成了一个对象而不是具体的某个属性值
goCarChange () {
// 这个方法已经可以不要了，因为fundForm.process_desc已经获取到整个对象了，想在哪个方法中用到fundForm.process_desc的值就可以用那个方法代替此方法
this.fundForm.process_code = this.fundForm.process_desc.process_code
this.fundForm.process_desc = this.fundForm.process_desc.process_desc // 这获取的是fundForm.process_desc对象下的某些属性值
}
就这能获取到下拉框的值了。
3.分页控件的使用(例子在表格中)
template中
<el-button icon="el-icon-search" type="primary" size="small" @click="doSearchs">查询</el-button>
<el-table
id="testTable1"
:height="tabHeight"
border highlight-current-row :data="data1" v-loading="tabLoading1" ref="multipleTable1"
:row-style="rowStyle"
>
<!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column label="编号" :show-overflow-tooltip="true" prop="repairNo" min-width="100"></el-table-column>
<!-- <el-table-column label="班组" :show-overflow-tooltip="true" prop="classGroup" >
<template slot-scope="scope">
<span v-if="scope.row.classGroup === '1'">甲</span>
<span v-else-if="scope.row.classGroup === '2'">乙</span>
<span v-else-if="scope.row.classGroup === '3'">丙</span>
<span v-else>丁</span>
</template>
</el-table-column> -->
<el-table-column label="操作" width="180" fixed="right" type="noFilter" v-if="showClum">
<template slot-scope="scope">
<el-button icon="el-icon-view" type="primary" size="small" @click="showRowData(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="yt-table-page">
<el-pagination
@size-change="dataPageSizeChange"
@current-change="dataPageCurrentChange"
:current-page="dataTable.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="+dataTable.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="dataTable.total"
>
</el-pagination>
</div>
data中:
data () {
data1: [],
tabLoading1: false,
dataTable: {
pageNum: 1,
pageSize: 20,
total: 0
},
}
methods中
computed: {
tabHeight: function () {
return window.innerHeight - 110
}
},
methods: {
rowStyle ({row, index}) {
return 'height: 24px' // 表格中每行的高度
},
dataPageSizeChange (size) {
this.dataTable.pageSize = size;
this.doSearch()
},
dataPageCurrentChange (index) {
this.dataTable.pageNum = index;
this.doSearch()
},
doSearchs () {
// 如果先选中第三页，我再输入查询条件点查询的时候，会从第三页开始查询，哪有那么多数据有三页呢，所以要从第一页开始查
this.dataTable.pageNum = 1
this.doSearch()
},
doSearch: function () { // doSearch () {}
let _this = this;
let params = {}
let startTime = _this.searchForm.startTime
let endTime = _this.searchForm.endTime
if (startTime && endTime && startTime > endTime) {
_this.$message.error('开始时间大于结束时间')
return false;
}
// 信息查询
// formatDate引入的是公司的时间格式转换 可以传'yyyy-MM-dd HH:mm:ss'，调用下面转换日期方法this.formatDate(startTime, 'yyyy-MM-dd')
startTime = formatDate(startTime, 'yyyy-MM-dd') // 送修开始时间
endTime = formatDate(endTime, 'yyyy-MM-dd') // 送修开始时间
_this.tabLoading1 = true;
if (_this.searchForm.personData === '1') {
// 送修时间
params = {
repairStartTime: startTime,
repairStartTime1: endTime,
carLicense: _this.searchForm.carLicense,
repairTypeCode: _this.searchForm.repairTypeCode,
repairItemsCode: _this.searchForm.repairItemsCode,
validflag: _this.searchForm.validflag,
repairFactory: _this.searchForm.repairFactory,
pageSize: _this.dataTable.pageSize,
pageNum: _this.dataTable.pageNum
}
}
_this.axios.get('tmscarrepairms/like/', {
params: params
}).then(function (res) {
// if (response) {
// _this.data1 = response.data.list
// }
_this.tabLoading1 = false;
if (res.code === '0') {
_this.data1 = res.data.list;
_this.dataTable.pageNum = res.data.pageNum;
_this.dataTable.pageSize = res.data.pageSize;
_this.dataTable.total = res.data.total;
} else {
_this.$message.error(res.message);
_this.dataTable.pageNum = 1;
_this.dataTable.total = 0;
}
}).catch(function () {
});
},
// 这里加个时间转换方法 根据传的格式来转换
formatDate (iDate, sFormat = 'yyyy-MM-dd HH:mm:ss') => {
if (!iDate) { return ''; }
let dDate = new Date(iDate);
let year = dDate.getFullYear();// 年
let month = dDate.getMonth() + 1;// 月
if (month < 10) { month = '0' + month; }
let date = dDate.getDate();// 日
if (date < 10) { date = '0' + date; }
let hour = dDate.getHours();// 时
if (hour < 10) { hour = '0' + hour; }
let minute = dDate.getMinutes();// 分
if (minute < 10) { minute = '0' + minute; }
let second = dDate.getSeconds();// 秒
if (second < 10) { second = '0' + second; }
let millisecond = dDate.getMilliseconds();// 毫秒
if (sFormat.indexOf('yyyy') >= 0) { sFormat = sFormat.replace('yyyy', year + ''); }
if (sFormat.indexOf('MM') >= 0) { sFormat = sFormat.replace('MM', month + ''); }
if (sFormat.indexOf('dd') >= 0) { sFormat = sFormat.replace('dd', date + ''); }
if (sFormat.indexOf('HH') >= 0) { sFormat = sFormat.replace('HH', hour + ''); }
if (sFormat.indexOf('mm') >= 0) { sFormat = sFormat.replace('mm', minute + ''); }
if (sFormat.indexOf('ss') >= 0) { sFormat = sFormat.replace('ss', second + ''); }
if (sFormat.indexOf('SSS') >= 0) { sFormat = sFormat.replace('SSS', millisecond + ''); }
return sFormat;
};
}
4.通过字符串拼接函数str.concat(),把需要得到结果的表达式作为参数。如果想要一个字符串是item2，从item1累加的话
:title="'x'.concat(1+ index)"
1875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
