elementUi使用單選框,並且單擊行的時候選中該條數據


在elementui里,table是怎么加上單選框的呢? 啥都不用想了,復制粘貼下面代碼就可以了。

 

<template>
  <div id="temglic">
    <el-table :data="tableData" border style="width: 100%">
      <!-- 單選按鈕,占這么寬干嘛,給他width="40"就行了 ,要想單擊行,必須加上@row-click  和   highlight-current-row --> 
<el-table-column align="center" fixed="left" width="40" @row-click="handleClickRow">
        <template scope="scope">
          <!-- 這垃圾elementUI,多出一行序號的列,怎么辦呢,在el-radio標簽之間給他個nbsp 就好了(然后特么的雖然給了這個,但是樣式還是有問題,所以最后加了個style,見下面) -->
          <el-radio
            :label="scope.$index"
            @change.native="getCurrentRow(scope.row)"
            v-model="radio"
            :show-overflow-tooltip="false"
          > </el-radio>
        </template>
      </el-table-column>
      <el-table-column fixed prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="province" label="省份"></el-table-column>
      <el-table-column prop="city" label="市區"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="zip" label="郵編"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      radio: "",   //  選中項
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀區",
          address: "上海市普陀區金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀區",
          address: "上海市普陀區金沙江路 1517 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀區",
          address: "上海市普陀區金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀區",
          address: "上海市普陀區金沙江路 1516 弄",
          zip: 200333
        }
      ]
    };
  },
  methods: {
 
    getCurrentRow(row) {
      // 獲取選中數據
      console.log(row);
    },
  handleClickRow(row) {
       this.radio = row.id
        console.log(this.radio);
    },

  }
};
</script>
<style lang="css">
/* 這個樣式很重要的,垃圾elementUI里多出一列,然后顯示省略號,把他隱藏就好 */
.el-radio__label{
  display: none;
}
</style>

  效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM