zoukankan      html  css  js  c++  java
  • elementUi使用单选框,并且单击行的时候选中该条数据

    在elementui里,table是怎么加上单选框的呢? 啥都不用想了,复制粘贴下面代码就可以了。

    <template>
      <div id="temglic">
        <el-table :data="tableData" border style=" 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>
    

      效果:

  • 相关阅读:
    删除Tomcat服务及其它注意
    下拉菜单被js图片挡住
    There are no resources that can be added or removed from the server
    Mysql存中文值乱码
    myeclipse的项目导入到eclipse下,com.sun.org.apache.commons.beanutils.BeanUtils不能导入
    No enclosing instance of type E is accessible. Must qualify the allocation with an enclosing
    winServer2003除默认端口外的其他端口只能本地访问,关闭防火墙即可
    Oracle 11.2.0.3 on windows 2008 r2
    windows2008 r2 卸载GI
    初始化参数(Initialization Parameter)知识合集 based on 11g
  • 原文地址:https://www.cnblogs.com/luguankun/p/12501538.html
Copyright © 2011-2022 走看看