element-ui,多选表格穿梭框实现，与表格被选中项颜色的添加

一、页面构图部分

<div style="display: flex">

<el-card class="dialogCardLeft">

<div slot="header">

<span> 待选运营位</span>

<el-input

placeholder="输入运营位名称"

v-model="dialogCardLeftInputData"

class="dialogCardLeftInput"

>

<img

slot="suffix"

src="../../assets/u8351.png"

class="InputSearchImg"

/>

</el-input>

</div>

<el-table

:data="OperationPositionData"

@selection-change="OperationPositionalSelectionChange"

@select="handleSelectTable"

@select-all="handleSelectTableAll"

@row-click="handleRowClick"

:row-class-name="tableRowClassNameMySelf"

style="width: 100%"

ref="OperationPositionTable"

>

<el-table-column type="selection" width="55"></el-table-column>

<el-table-column

label="序号"

type="index"

:index="indexMethod"

width="50"

>

</el-table-column>

<el-table-column prop="sms" label="运营位编码"> </el-table-column>

<el-table-column prop="name" label="运营位名称"> </el-table-column>

<el-table-column prop="position" label="归属渠道">

</el-table-column>

</el-table>

</el-card>

<div class="OperationPositionButtonFather">

<button

class="OperationPositionButton button-blue"

@click="giveDataToAlreadyTable"

:disabled="ChangeStatusButton.length == 0 ? 'true' : undefined"

>

>>

</button>

<button

class="OperationPositionButton button-red"

@click="giveDataToBeTable"

:disabled="ChangeStatusRedButton.length == 0 ? 'true' : undefined"

>

<<

</button>

</div>

<el-card class="dialogCardRight">

<div slot="header">

<span> 已选运营位</span>

</div>

<el-table

@selection-change="OperationPositionalAlreadySelectionChange"

:data="OperationPositionAlreadySelectData"

style="width: 100%&