transfer

checked style

by xie shine

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
      <template>
        <el-transfer v-model="value1" ref="el" @click.native="clickFun" :data="data"></el-transfer>
    </template>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");
.checked{
  background: #f9f9f9;
}
.checked span{
  color:red;
}

JavaScript

var Main = {
        data() {
            const generateData = _ => {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项 ${ i }`,
                        disabled: i % 4 === 0
                    });
                }
                return data
            };
            return {
                data: generateData(),
                value1: [1, 4],
                dom:null,
            };
        },
        mounted(){
            this.dom = Array.from(this.$refs.el.$el.querySelectorAll(".el-transfer-panel__item"));
            this.clickFun();
        },
        methods:{
            clickFun(){
                setTimeout(()=>{
                    this.dom.forEach(div =>{
                        div.classList[!div.querySelector("span.is-checked")?'remove':'add']("checked");
                    })
                },100)
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app')