|
|
@@ -1,286 +1,304 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-table
|
|
|
- ref="tableRef"
|
|
|
- :cell-style="{padding:'0px',fontSize:'12px'}"
|
|
|
- :header-cell-style="tableHeaderCellStyle"
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- style="width: 100%"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- @row-click="rowClick"
|
|
|
- :row-style="rowStyle"
|
|
|
- :row-class-name="rowClassName" >
|
|
|
- <el-table-column fixed="left" type="selection" width="55" />
|
|
|
- <el-table-column prop="index" label="行号" width="50px" >
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{Number(scope.$index) + 1}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="serverName" label="项目名称" width="140px" >
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <search-query v-if="row.edit"
|
|
|
- :datalist="serverData"
|
|
|
- :selectValue="row.serverName"
|
|
|
- :clearable="true"
|
|
|
- :buttonIf="false"
|
|
|
- :filterable="true"
|
|
|
- size="mini"
|
|
|
- :forParameter="{key:'dictKey',label:'dictValue',value:'dictValue'}"
|
|
|
- placeholder="请选择项目名称"
|
|
|
- @corpChange="corpChange($event,'serverName')"
|
|
|
- @corpFocus="serverWorkDictsfun" >
|
|
|
- </search-query>
|
|
|
- <span v-else>{{row.serverName}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="typeno" label="规格型号" >
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-input v-if="row.edit" style="width: 100%;" v-model="row.typeno"
|
|
|
- size="mini" autocomplete="off"
|
|
|
- clearable placeholder="请输入规格型号" >
|
|
|
- </el-input>
|
|
|
- <span v-else>{{row.typeno}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="unit" label="单位" width="100px" >
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <search-query v-if="row.edit"
|
|
|
- :datalist="unitData"
|
|
|
- :selectValue="row.unit"
|
|
|
- :clearable="true"
|
|
|
- :buttonIf="false"
|
|
|
- :filterable="true"
|
|
|
- size="mini"
|
|
|
- :forParameter="{key:'dictKey',label:'dictValue',value:'dictValue'}"
|
|
|
- placeholder="请选择单位"
|
|
|
- @corpChange="corpChange($event,'unit',row)"
|
|
|
- @corpFocus="unitWorkDictsfun" >
|
|
|
- </search-query>
|
|
|
- <span v-else>{{row.unit}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="number" label="数量" width="100px" >
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-input v-if="row.edit" style="width: 100%;" v-model="row.number"
|
|
|
- size="mini" autocomplete="off"
|
|
|
- clearable placeholder="请输入数量" >
|
|
|
- </el-input>
|
|
|
- <span v-else>{{row.number}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="price" label="单价(含税)" >
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-input v-if="row.edit" style="width: 100%;" v-model="row.price"
|
|
|
- size="mini" autocomplete="off"
|
|
|
- clearable placeholder="请输入单价" >
|
|
|
- </el-input>
|
|
|
- <span v-else>{{row.price}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="amount" label="金额(含税)" >
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-input v-if="row.edit" style="width: 100%;" v-model="row.amount"
|
|
|
- size="mini" autocomplete="off"
|
|
|
- clearable placeholder="请输入金额" @input="amountInput(row)" >
|
|
|
- </el-input>
|
|
|
- <span v-else>{{row.amount}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="amountRate" label="税率(%)" />
|
|
|
- <el-table-column prop="amountTax" label="税额" />
|
|
|
- <el-table-column
|
|
|
- fixed="right"
|
|
|
- label="操作"
|
|
|
- width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button v-if="scope.row.edit" :disabled="editSave" type="text" size="small" @click="savefun(scope.row,scope.index)">保存</el-button>
|
|
|
- <el-button v-else type="text" :disabled="editSave" size="small" @click="editfun(scope.row,scope.index)" >编辑</el-button>
|
|
|
- <el-button type="text" :disabled="editSave" size="small" @click="deletefun(scope.row,scope.index)" >删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <el-table
|
|
|
+ ref="tableRef"
|
|
|
+ :cell-style="{ padding: '0px', fontSize: '12px' }"
|
|
|
+ :header-cell-style="tableHeaderCellStyle"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ @row-click="rowClick"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :row-class-name="rowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column fixed="left" type="selection" width="55" />
|
|
|
+ <el-table-column prop="index" label="行号" width="50px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ Number(scope.$index) + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="serverName" label="项目名称" width="140px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <search-query
|
|
|
+ v-if="row.edit"
|
|
|
+ :datalist="serverData"
|
|
|
+ :selectValue="row.serverName"
|
|
|
+ :clearable="true"
|
|
|
+ :buttonIf="false"
|
|
|
+ :filterable="true"
|
|
|
+ size="mini"
|
|
|
+ :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictValue' }"
|
|
|
+ placeholder="请选择项目名称"
|
|
|
+ @corpChange="corpChange($event, 'serverName')"
|
|
|
+ @corpFocus="serverWorkDictsfun"
|
|
|
+ >
|
|
|
+ </search-query>
|
|
|
+ <span v-else>{{ row.serverName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="typeno" label="规格型号">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input v-if="row.edit" style="width: 100%;" v-model="row.typeno" size="mini" autocomplete="off" clearable placeholder="请输入规格型号">
|
|
|
+ </el-input>
|
|
|
+ <span v-else>{{ row.typeno }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="unit" label="单位" width="100px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <search-query
|
|
|
+ v-if="row.edit"
|
|
|
+ :datalist="unitData"
|
|
|
+ :selectValue="row.unit"
|
|
|
+ :clearable="true"
|
|
|
+ :buttonIf="false"
|
|
|
+ :filterable="true"
|
|
|
+ size="mini"
|
|
|
+ :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictValue' }"
|
|
|
+ placeholder="请选择单位"
|
|
|
+ @corpChange="corpChange($event, 'unit', row)"
|
|
|
+ @corpFocus="unitWorkDictsfun"
|
|
|
+ >
|
|
|
+ </search-query>
|
|
|
+ <span v-else>{{ row.unit }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="number" label="数量" width="100px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input v-if="row.edit" style="width: 100%;" v-model="row.number" size="mini" autocomplete="off" clearable placeholder="请输入数量">
|
|
|
+ </el-input>
|
|
|
+ <span v-else>{{ row.number }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price" label="单价(含税)">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input v-if="row.edit" style="width: 100%;" v-model="row.price" size="mini" autocomplete="off" clearable placeholder="请输入单价">
|
|
|
+ </el-input>
|
|
|
+ <span v-else>{{ row.price }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="amount" label="金额(含税)">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input
|
|
|
+ v-if="row.edit"
|
|
|
+ style="width: 100%;"
|
|
|
+ v-model="row.amount"
|
|
|
+ size="mini"
|
|
|
+ autocomplete="off"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入金额"
|
|
|
+ @input="amountInput(row)"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <span v-else>{{ row.amount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="amountRate" label="税率(%)">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input-number v-if="row.edit" style="width: 100%;" v-model="row.amountRate" :controls="false" size="mini" autocomplete="off" clearable placeholder="请输入税率">
|
|
|
+ </el-input-number>
|
|
|
+ <span v-else>{{ row.amountRate }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="remarks" label="税额" />
|
|
|
+ <el-table-column prop="remarks" label="备注">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input v-if="row.edit" style="width: 100%;" v-model="row.remarks" size="mini" autocomplete="off" clearable placeholder="请输入税率">
|
|
|
+ </el-input>
|
|
|
+ <span v-else>{{ row.remarks }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button v-if="scope.row.edit" :disabled="editSave" type="text" size="small" @click="savefun(scope.row, scope.index)">保存</el-button>
|
|
|
+ <el-button v-else type="text" :disabled="editSave" size="small" @click="editfun(scope.row, scope.index)">编辑</el-button>
|
|
|
+ <el-button type="text" :disabled="editSave" size="small" @click="deletefun(scope.row, scope.index)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
|
|
|
- import {getWorkDicts} from "@/api/system/dictbiz";
|
|
|
- import {fininvoiceitemdetailSubmit} from "@/api/iosBasicData/fininvoices";
|
|
|
+import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
|
|
|
+import { getWorkDicts } from "@/api/system/dictbiz";
|
|
|
+import { fininvoiceitemdetailSubmit } from "@/api/iosBasicData/fininvoices";
|
|
|
|
|
|
- export default {
|
|
|
- components: {SearchQuery},
|
|
|
- props:{
|
|
|
- tableData:{
|
|
|
- type:Array,
|
|
|
- default:[]
|
|
|
- },
|
|
|
- handleSelectionData:{
|
|
|
- type:Array,
|
|
|
- default:[],
|
|
|
- },
|
|
|
- editSave:{
|
|
|
- type:Boolean,
|
|
|
- default:false,
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- serverData:[], // 项目名称字典数据
|
|
|
- unitData:[], // 单位字典数据
|
|
|
- };
|
|
|
+export default {
|
|
|
+ components: { SearchQuery },
|
|
|
+ props: {
|
|
|
+ tableData: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 修改金额的回调
|
|
|
- amountInput(row){
|
|
|
- // amountTax
|
|
|
- },
|
|
|
- // 下拉回调
|
|
|
- corpChange(value,name,row){
|
|
|
- this.$set(row,name,value)
|
|
|
- },
|
|
|
- // 保存
|
|
|
- savefun(row){
|
|
|
- this.$emit('savefun',row)
|
|
|
- },
|
|
|
- // 编辑
|
|
|
- editfun(row){
|
|
|
- this.$set(row,'edit',true)
|
|
|
- },
|
|
|
- // 删除
|
|
|
- deletefun(row,index){
|
|
|
- this.$emit('deletefun',row.id,index)
|
|
|
- },
|
|
|
- // 项目名称字典数据
|
|
|
- serverWorkDictsfun(){
|
|
|
- getWorkDicts('Invoice_information_los').then(res=>{
|
|
|
- this.serverData = res.data.data;
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取单位字典数据
|
|
|
- unitWorkDictsfun(){
|
|
|
- getWorkDicts('Invoice_Items_unit_los').then(res=>{
|
|
|
- this.unitData = res.data.data;
|
|
|
- })
|
|
|
- },
|
|
|
- // 表头样式
|
|
|
- tableHeaderCellStyle({row,column,rowIndex, columnIndex}){
|
|
|
- return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"
|
|
|
- },
|
|
|
- // 多选选择的数据
|
|
|
- handleSelectionChange(arr){
|
|
|
- this.$emit('handleSelectionChange',arr)
|
|
|
- },
|
|
|
- // 监听点击表格事件
|
|
|
- rowClick(row, column, event) {
|
|
|
- let refsElTable = this.$refs.tableRef; // 获取表格对象
|
|
|
- if (this.CtrlDown) {
|
|
|
- refsElTable.toggleRowSelection(row); // ctrl多选 如果点击两次同样会取消选中
|
|
|
- return;
|
|
|
- }
|
|
|
- if ( this.shiftOrAltDown && this.handleSelectionData.length > 0) {
|
|
|
- // 通过rowIndex判断已选择的行中最上面和最下面的是哪行，再对比按住shift/alt点击的当前行得到新的最上面和最下面的行，把这两行中间的行进行循环选中。
|
|
|
- let topAndBottom = this.getTopAndBottom( row, this.bottomSelectionRow, this.topSelectionRow );
|
|
|
- refsElTable.clearSelection(); //先清空 不然会导致在这两行中间之外的行状态不变
|
|
|
- for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) { //选中两行之间的所有行
|
|
|
- refsElTable.toggleRowSelection(this.tableData[index], true);
|
|
|
- }
|
|
|
- } else {
|
|
|
- let findRow = this.handleSelectionData.find(c => c.rowIndex == row.rowIndex); //找出当前选中行
|
|
|
- //如果只有一行且点击的也是这一行则取消选择 否则清空再选中当前点击行
|
|
|
- if (findRow&& this.handleSelectionData.length === 1 ) {
|
|
|
- refsElTable.toggleRowSelection(row, false);
|
|
|
- return;
|
|
|
- }
|
|
|
- // refsElTable.clearSelection(); // 清空之前选择的数据(如果放开，选择之前会变成单选)
|
|
|
- refsElTable.toggleRowSelection(row); // 调用选中行方法
|
|
|
- }
|
|
|
- },
|
|
|
- // 行的 style 的回调方法
|
|
|
- rowStyle({row,rowIndex}) {
|
|
|
- // 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
|
|
|
- // object: 要添加或者修改属性的目标对象；prop: 要定义或修改属性的名称；descript: 是一个对象，里面是我们上述的对象属性的特性；
|
|
|
- Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
|
|
|
- value: rowIndex, // 设置age的值，不设置的话默认为undefined
|
|
|
- writable: true, // 表示属性的值true可以修改,false不可以被修改
|
|
|
- enumerable: false, // 设置为false表示不能通过 for-in 循环返回
|
|
|
- // configurable: false, // configurable 设置为 false，意味着这个属性不能从对象上删除
|
|
|
- })
|
|
|
- },
|
|
|
- keyDown(event) {
|
|
|
- let key = event.keyCode;
|
|
|
- if (key == 17) this.CtrlDown = true;
|
|
|
- if (key == 16 || key == 18) this.shiftOrAltDown = true;
|
|
|
- },
|
|
|
- keyUp(event) {
|
|
|
- let key = event.keyCode;
|
|
|
- if (key == 17) this.CtrlDown = false;
|
|
|
- if (key == 16 || key == 18) this.shiftOrAltDown = false;
|
|
|
- },
|
|
|
- // 文章说明 https://www.jianshu.com/p/48f2c522d2a2
|
|
|
- getTopAndBottom(row, bottom, top){
|
|
|
- let n = row.rowIndex,
|
|
|
- mx = bottom.rowIndex,
|
|
|
- mi = top.rowIndex;
|
|
|
- if (n > mx) {
|
|
|
- return {
|
|
|
- top: mi,
|
|
|
- bottom: n
|
|
|
- };
|
|
|
- } else if (n < mx && n > mi) {
|
|
|
- return {
|
|
|
- top: mi,
|
|
|
- bottom: n
|
|
|
- };
|
|
|
- } else if (n < mi) {
|
|
|
- return {
|
|
|
- top: n,
|
|
|
- bottom: mx
|
|
|
- };
|
|
|
- } else if (n == mi || n == mx) {
|
|
|
- return {
|
|
|
- top: mi,
|
|
|
- bottom: mx
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- // 给选中行加上current-row这个class类，所以要使用row-class-name这个属性（其实给每一行添加rowIndex也可以用这个属性），
|
|
|
- // 判断方式也是通过判断rowIndex对比
|
|
|
- rowClassName({ row, rowIndex }) {
|
|
|
- let rowName = "",
|
|
|
- findRow = this.handleSelectionData.find(c => c.rowIndex === row.rowIndex);
|
|
|
- if (findRow) {
|
|
|
- rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
|
|
|
- }
|
|
|
- return rowName; //也可以再加上其他类名 如果有需求的话
|
|
|
- },
|
|
|
+ handleSelectionData: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
},
|
|
|
- mounted() {
|
|
|
- // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
|
|
|
- addEventListener("keydown", this.keyDown, false);
|
|
|
- addEventListener("keyup", this.keyUp, false);
|
|
|
+ editSave: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ serverData: [], // 项目名称字典数据
|
|
|
+ unitData: [] // 单位字典数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 修改金额的回调
|
|
|
+ amountInput(row) {
|
|
|
+ // amountTax
|
|
|
},
|
|
|
- beforeDestroy() { //解绑
|
|
|
- removeEventListener("keydown", this.keyDown);
|
|
|
- removeEventListener("keyup", this.keyUp);
|
|
|
+ // 下拉回调
|
|
|
+ corpChange(value, name, row) {
|
|
|
+ this.$set(row, name, value);
|
|
|
},
|
|
|
- computed: { //实时得到最上行和最下行
|
|
|
- bottomSelectionRow() {
|
|
|
- if (this.handleSelectionData.length == 0) return null;
|
|
|
- return this.handleSelectionData.reduce((start, end) => {
|
|
|
- return start.rowIndex > end.rowIndex ? start : end;
|
|
|
- });
|
|
|
- },
|
|
|
- topSelectionRow() {
|
|
|
- if (this.handleSelectionData.length == 0) return null;
|
|
|
- return this.handleSelectionData.reduce((start, end) => {
|
|
|
- return start.rowIndex < end.rowIndex ? start : end;
|
|
|
- });
|
|
|
+ // 保存
|
|
|
+ savefun(row) {
|
|
|
+ this.$emit("savefun", row);
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ editfun(row) {
|
|
|
+ this.$set(row, "edit", true);
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ deletefun(row, index) {
|
|
|
+ this.$emit("deletefun", row.id, index);
|
|
|
+ },
|
|
|
+ // 项目名称字典数据
|
|
|
+ serverWorkDictsfun() {
|
|
|
+ getWorkDicts("Invoice_information_los").then(res => {
|
|
|
+ this.serverData = res.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取单位字典数据
|
|
|
+ unitWorkDictsfun() {
|
|
|
+ getWorkDicts("Invoice_Items_unit_los").then(res => {
|
|
|
+ this.unitData = res.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表头样式
|
|
|
+ tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
|
|
|
+ return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff";
|
|
|
+ },
|
|
|
+ // 多选选择的数据
|
|
|
+ handleSelectionChange(arr) {
|
|
|
+ this.$emit("handleSelectionChange", arr);
|
|
|
+ },
|
|
|
+ // 监听点击表格事件
|
|
|
+ rowClick(row, column, event) {
|
|
|
+ let refsElTable = this.$refs.tableRef; // 获取表格对象
|
|
|
+ if (this.CtrlDown) {
|
|
|
+ refsElTable.toggleRowSelection(row); // ctrl多选 如果点击两次同样会取消选中
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.shiftOrAltDown && this.handleSelectionData.length > 0) {
|
|
|
+ // 通过rowIndex判断已选择的行中最上面和最下面的是哪行，再对比按住shift/alt点击的当前行得到新的最上面和最下面的行，把这两行中间的行进行循环选中。
|
|
|
+ let topAndBottom = this.getTopAndBottom(row, this.bottomSelectionRow, this.topSelectionRow);
|
|
|
+ refsElTable.clearSelection(); //先清空 不然会导致在这两行中间之外的行状态不变
|
|
|
+ for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) {
|
|
|
+ //选中两行之间的所有行
|
|
|
+ refsElTable.toggleRowSelection(this.tableData[index], true);
|
|
|
}
|
|
|
+ } else {
|
|
|
+ let findRow = this.handleSelectionData.find(c => c.rowIndex == row.rowIndex); //找出当前选中行
|
|
|
+ //如果只有一行且点击的也是这一行则取消选择 否则清空再选中当前点击行
|
|
|
+ if (findRow && this.handleSelectionData.length === 1) {
|
|
|
+ refsElTable.toggleRowSelection(row, false);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // refsElTable.clearSelection(); // 清空之前选择的数据(如果放开，选择之前会变成单选)
|
|
|
+ refsElTable.toggleRowSelection(row); // 调用选中行方法
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 行的 style 的回调方法
|
|
|
+ rowStyle({ row, rowIndex }) {
|
|
|
+ // 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
|
|
|
+ // object: 要添加或者修改属性的目标对象；prop: 要定义或修改属性的名称；descript: 是一个对象，里面是我们上述的对象属性的特性；
|
|
|
+ Object.defineProperty(row, "rowIndex", {
|
|
|
+ //给每一行添加不可枚举属性rowIndex来标识当前行
|
|
|
+ value: rowIndex, // 设置age的值，不设置的话默认为undefined
|
|
|
+ writable: true, // 表示属性的值true可以修改,false不可以被修改
|
|
|
+ enumerable: false // 设置为false表示不能通过 for-in 循环返回
|
|
|
+ // configurable: false, // configurable 设置为 false，意味着这个属性不能从对象上删除
|
|
|
+ });
|
|
|
+ },
|
|
|
+ keyDown(event) {
|
|
|
+ let key = event.keyCode;
|
|
|
+ if (key == 17) this.CtrlDown = true;
|
|
|
+ if (key == 16 || key == 18) this.shiftOrAltDown = true;
|
|
|
+ },
|
|
|
+ keyUp(event) {
|
|
|
+ let key = event.keyCode;
|
|
|
+ if (key == 17) this.CtrlDown = false;
|
|
|
+ if (key == 16 || key == 18) this.shiftOrAltDown = false;
|
|
|
},
|
|
|
- };
|
|
|
+ // 文章说明 https://www.jianshu.com/p/48f2c522d2a2
|
|
|
+ getTopAndBottom(row, bottom, top) {
|
|
|
+ let n = row.rowIndex,
|
|
|
+ mx = bottom.rowIndex,
|
|
|
+ mi = top.rowIndex;
|
|
|
+ if (n > mx) {
|
|
|
+ return {
|
|
|
+ top: mi,
|
|
|
+ bottom: n
|
|
|
+ };
|
|
|
+ } else if (n < mx && n > mi) {
|
|
|
+ return {
|
|
|
+ top: mi,
|
|
|
+ bottom: n
|
|
|
+ };
|
|
|
+ } else if (n < mi) {
|
|
|
+ return {
|
|
|
+ top: n,
|
|
|
+ bottom: mx
|
|
|
+ };
|
|
|
+ } else if (n == mi || n == mx) {
|
|
|
+ return {
|
|
|
+ top: mi,
|
|
|
+ bottom: mx
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 给选中行加上current-row这个class类，所以要使用row-class-name这个属性（其实给每一行添加rowIndex也可以用这个属性），
|
|
|
+ // 判断方式也是通过判断rowIndex对比
|
|
|
+ rowClassName({ row, rowIndex }) {
|
|
|
+ let rowName = "",
|
|
|
+ findRow = this.handleSelectionData.find(c => c.rowIndex === row.rowIndex);
|
|
|
+ if (findRow) {
|
|
|
+ rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
|
|
|
+ }
|
|
|
+ return rowName; //也可以再加上其他类名 如果有需求的话
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
|
|
|
+ addEventListener("keydown", this.keyDown, false);
|
|
|
+ addEventListener("keyup", this.keyUp, false);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ //解绑
|
|
|
+ removeEventListener("keydown", this.keyDown);
|
|
|
+ removeEventListener("keyup", this.keyUp);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //实时得到最上行和最下行
|
|
|
+ bottomSelectionRow() {
|
|
|
+ if (this.handleSelectionData.length == 0) return null;
|
|
|
+ return this.handleSelectionData.reduce((start, end) => {
|
|
|
+ return start.rowIndex > end.rowIndex ? start : end;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ topSelectionRow() {
|
|
|
+ if (this.handleSelectionData.length == 0) return null;
|
|
|
+ return this.handleSelectionData.reduce((start, end) => {
|
|
|
+ return start.rowIndex < end.rowIndex ? start : end;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
+<style scoped></style>
|
Qukatie