element Table 表格 多選框改成單選

      <div class="enterpriseList">
        <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
          :row-class-name="selectRowClassName">
          <el-table-column type="selection" width="30" />
          <el-table-column prop="num" label="編號" width="40" />
          <el-table-column prop="companyname" label="公司名稱" width="150" />
          <el-table-column prop="code" label="公司編號" width="100" />
          <el-table-column prop="username" label="用戶姓名" width="80" />
          <el-table-column prop="phone" label="手機號" width="100" />
          <el-table-column prop="emil" label="郵箱" width="100" />
          <el-table-column prop="isCheck" width="100" label="審覈狀態">
            <!-- 自定義的列 -->
            <template v-slot="scope">
              <div v-if="scope.row.status == 1" style="color:#DF0024">未審覈</div>
              <div v-else style="color:#00A756">已審覈</div>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="備註" width="150" />
        </el-table>
      </div>
 data() {
    return {
      enterpriseName: '',
      userName: '',
      tableSelect: [],
      tableData:[
  {
    num: '1',
    companyname: '信息技術股份有限公司',
    code: '1000000001',
    username: '張三',
    phone: '12345678901',
    emil: '[email protected]',
    status: '2',
    remarks: '柔荑花郭汝瑰還是',
  },
  {
    num: '2',
    companyname: '信息技術股份有限公司',
    code: '1000000001',
    username: '張三',
    phone: '12345678901',
    emil: '[email protected]',
    status: '2',
    remarks: '柔荑花郭汝瑰還是',
  },
  {
    num: '3',
    companyname: '信息技術股份有限公司',
    code: '1000000001',
    username: '張三',
    phone: '12345678901',
    emil: '[email protected]',
    status: '1',
    remarks: '柔荑花郭汝瑰還',
  },
  {
    num: '4',
    companyname: '信息技術股份有限公司',
    code: '1000000001',
    username: '張三',
    phone: '12345678901',
    emil: '[email protected]',
    status: '2',
    remarks: '柔荑花瑰還是',
  },
]
     
    }
  },
  methods: {
    selectRowClassName({ row }) {//添加表格行點擊樣式--rowIndex 
      let color = "";
      this.tableSelect.forEach(item => {
        if (item.num === row.num) {
          color = "current";
        }
      });
      return color;
    },
    handleSelectionChange(val) {//表格選中事件
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
        // console.log('val')

      } else {
        this.tableSelect = val;
        // console.log('tableSelect', this.tableSelect)
      }
    },
  },

樣式從中間截得 不確定全不全 可自行更改

 .enterpriseList {
      border: 1px solid #E1E1E1;
      border-bottom: none;
      margin-top: 10px;

      :deep (.el-table__body),
      :deep (.el-table__header) {
        width: 100% !important;
      }

      :deep (.el-table .cell) {
        text-align: center;
      }

      :deep(.el-table td.el-table__cell) {
        border-bottom: 1px solid #E1E1E1;
        padding: 10px 0;
      }

      :deep (.el-table__header) {

        //隱藏多選框 
        .el-checkbox {
          display: none;
        }
      }

      :deep(.el-table__body .current>td)  {
        background-color: #F5F8FF !important;
      }
    }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章