簡單El-Table封裝（四）

獲取checkbox中的值

VTable.vue組件

<template>
   <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
     <!-- 添加索引 -->
     <el-table-column  type="index" width="55"></el-table-column>
     <!-- 添加一個複選框 -->
      <el-table-column checkbox v-if="checkbox" type="selection" width="55" >

      </el-table-column>
      <template v-for="item in columns">
        <!--v-if 判斷類型 -->
        <el-table-column v-if="item.type === 'function'" :prop="item.prop" :label="item.label" :key="item.prop" >
          <!-- 套一層template,就是爲了取這一行的值-->
          <template slot-scope="scope">
              <!-- 這裏可以把數據傳給callback函數 -->
              <div v-html="item.callback && item.callback(scope.row)" ></div>
          </template>
        </el-table-column>
        <!-- 添加一個type標識用來標註類型的唯一性 -->
        <el-table-column v-else-if="item.type==='address'" :prop="item.prop" :label="item.label" :key="item.prop" >
          <template slot-scope="scope">
            <!-- 渲染有html標籤的 -->
            <div v-html="scope.row.address"></div>
          </template>
        </el-table-column>
        <el-table-column v-else :prop="item.prop" :label="item.label" :key="item.prop">
        </el-table-column>
      </template>

      
    </el-table>
</template>

<script>
export default {
    name:"VTable",
    props:{
      //接收列
      columns:{
        type:Array,
        default:()=>[]
      },
      //接收數據
      tableData:{
        type:Array,
        default:()=>[]
      },
      checkbox:Boolean
    },
    data() {
        return {
        }
      },
    methods:{
      handleSelectionChange(val) {
        console.log(val);
        this.$emit("CheckVal",val)
      }
    }
}
</script>
<style>
</style>

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
     <VTable checkbox :columns="columns" :tableData="tableData" @CheckVal="CheckVal"></VTable>
  </div>
</template>

<script>
// @ is an alias to /src
import VTable from '@/components/VTable.vue'

export default {
  name: 'Home',
  data(){
    return{
      columns:[
          {
            type:'function',  //定義函數類型，用於回調
            label:"URL地址",
            prop:"date",
            callback:(val)=>{
             //通過回調把數據出過來，然後處理想要的格式
              return `<a href="http://www.baidu.com">${val.name}</a>`
            }},
          {label:"姓名",prop:"name"},
          {label:"地址",prop:"address",type:'address'},
          {label:"性別",prop:"gener"}
        ],
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 <div style="color:red">1518</div> 弄',  //這裏有html標籤
          gener:"男"
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄',
          gener:"女"
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }]
    }
  },
  components: {
     VTable
  },
  methods:{
    CheckVal(val){
      console.log("CheckVal",val);
    }
  }
}
</script>

獲取checkbox第二種方法 

通過數據同步的方式

VTable.vue中添加內容

 props:{
      //接收列
      columns:{
        type:Array,
        default:()=>[]
      },
      //接收數據
      tableData:{
        type:Array,
        default:()=>[]
      },
      checkbox:Boolean,
      checkList:{
        type:Array,
        default:()=>{}
      }

    },

methods:{
      handleSelectionChange(val) {
        console.log(val);
        this.$emit("update:checkList",val)
      }
    }

Home.vue中添加內容

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- sync修飾符 -->
     <VTable checkbox :columns="columns" :tableData="tableData" :check-list.sync="check_list"></VTable>
  </div>
</template>

data(){
  return{
        check_list:[]
    }  
}    

watch:{
    check_list: { //通過監聽的方式來獲取值
        handler(value) {
          console.log("22",value);
        }
    }
  },