一腊状、要實(shí)現(xiàn)如下的效果

左側(cè)表格勾選，右側(cè)表格顯示左側(cè)勾選的數(shù)據(jù)瓢对，同時(shí)右側(cè)移除數(shù)據(jù)寿酌，左側(cè)對(duì)應(yīng)的數(shù)據(jù)顯示不選中狀態(tài)

image.png

• html 代碼如下

    <FormItem label="" label-position="top">
        <span>服務(wù)器列表</span>
        <Table border ref="selection" :columns="columnsLeft" :data="tableDataLeft" 
         :height="tableHeight" @on-selection-change="changeLeftTable"></Table>
    </FormItem>

    <FormItem label="" label-position="top">
        <span>已選服務(wù)器</span>
        <Table border  :columns="columnsRight" :data="tableDataRight" :height="tableHeight"></Table>
    </FormItem>

• data reutrn 如下

columnsLeft: [
    {
        type: 'selection',
        width: 60,
        align: 'center'
    },
    {
        title: '名稱/ID',
        key: 'name'
    },
    {
        title: '狀態(tài)',
        key: 'age'
    },
    {
        title: '類型',
        key: 'address'
    },
    {
        title: '可用區(qū)',
        key: 'address'
    },
    {
        title: '綁定狀態(tài)',
        key: 'address'
    },
],
columnsRight: [
    {
        title: '名稱/ID',
        key: 'name'
    },
    {
        title: '狀態(tài)',
        key: 'age'
    },
    {
        title: '類型',
        key: 'address'
    },
    {
        title: '可用區(qū)',
        key: 'address'
    },
    {
        title: '綁定狀態(tài)',
        key: 'address'
    },
    {
        title: '操作',
        align: 'center',
        render: (h, params) => {
            return (
                <div>
                    <i-button type="primary" size="small" on-click={() => this.rowDel(params)}>移除</i-button>
                </div>
            )
        }
    },
],
tableDataLeft: [
    {
        name: 'John Brown',
        age: 18,
        address: 'New York',
        date: '2016-10-03',
        id: 1,
        _checked: false,
    },
    {
        name: 'Jim Green',
        age: 24,
        address: 'London',
        date: '2016-10-01',
        id: 2,
        _checked: false,
    },
    {
        name: 'Joe Black',
        age: 30,
        address: 'Sydney',
        date: '2016-10-02',
        id: 3,
        _checked: false,
    },
    {
        name: 'Jon Snow',
        age: 26,
        address: 'Ottawa',
        date: '2016-10-04',
        id: 4,
        _checked: false,
    }
],
// 選擇服務(wù)器
tableDataRight: [],  

• methods 代碼如下：

// 左側(cè)勾選服務(wù)器
changeLeftTable (selection) {
    let selectionIds = selection.map(row => row.id);
    this.tableDataLeft.forEach(row => {
        row._checked = selectionIds.includes(row.id);
    });
    this.tableDataRight = selection;
},
// 右側(cè)移除服務(wù)器
rowDel ({ row, index }) {
    this.tableDataLeft.forEach(item => {
        if (item.id === row.id) {
            item._checked = false
        }
    });
    this.tableDataRight.splice(index, 1);
},