catalogue

Table table

Multiple choice

Element UI _ It's difficult and complicated. I'm sure big guys have encountered a lot of problems in modifying the style of their component library,  

Here, I will also record the problems and solutions I encounter in my daily use and share them with you,  

Of course, these are just some of my ideas for reference only. You can learn from them and discuss them together:  

Table table

It is used to display multiple pieces of data with similar structure. You can sort, filter, compare or other user-defined operations on the data.

Multiple choice

Use Checkbox when selecting multiple rows of data.

Requirements: I don't need the select all button in the upper left corner. I just need the radio button below it:

realization:  

Original code:

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="date"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="full name"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="address"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Switch the selected status of the second and third rows</el-button>
    <el-button @click="toggleSelection()">Deselect</el-button>
  </div>

Original effect:  

Updated code:

<div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column width="50">
        <template slot="header">
          <div></div>
        </template>
        <template slot-scope="scope">
          <input type="checkbox" :value="scope.row.date" />
        </template>
      </el-table-column>
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column label="date" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="full name" width="120"> </el-table-column>
      <el-table-column prop="address" label="address" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >Switch the selected status of the second and third rows</el-button
      >
      <el-button @click="toggleSelection()">Deselect</el-button>
    </div>
  </div>

Effect after update:

The above is law-abiding: after several tests, it is found that the following simple treatment can also be realized:

After processing, we can achieve the effect we wanted,  

The reason why it is so troublesome is that at first we found the official document and did not modify the configuration items in this regard. Then we wanted to control and modify its style by getting the label class name. It was found that we can directly set it to display: none in the browser; Hide it when you change the code, but it doesn't work after modifying the code. There is no effect change,   Then even if we increase the weight value (!   important), or give it a style(  :: v-deep) didn't achieve the effect we wanted. Finally, it took us a long time to have the above solution. Because it's really difficult to do, I'll record the solution so that I can have an impression when I encounter this similar problem in the future. I hope it can be of some help to you