element带挑选报表将表头的复选框改为文本的完成

日期：2021-01-20 类型：科技新闻 

关键词：微信小程序页面设计，python小程序，小程序首页模板，如何建立微信小程序，怎么做微信小程序

方式1：应用报表特性：header-cell-class-name 报表页面编码

<el-table
    ref="multipleTable"
    :data="tableData"
    :header-cell-class-name="cellclass"
    style="width: 100%">
    <el-table-column
      type="selection">
    </el-table-column>
    <el-table-column
      label="时间"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="详细地址"
      >
    </el-table-column>
  </el-table>

对应js

data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    methods: {
      cellclass(row){
        if(row.columnIndex===0){
          return 'DisabledSelection'
        }
      }
    }

对应CSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
  display:none;
  position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
  content:"挑选";
  position:absolute;
  right 11px;
}

/deep/的功效：假如你应用了他人的组件或自身开发设计1个组件，有时你改动1处便可能危害到其他地区，这个情况下要末你无需他人的组件，自身再次封裝1个，但许多情况下是不太实际的，因此就必须应用/deep/，既不危害到其他地区，又能改动子组件在当今的款式。

方式2、应用报表列题目特性：label-class-name

页面编码

<el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column label-class-name="DisabledSelection"
      type="selection">
    </el-table-column>
    <el-table-column
      label="时间"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="详细地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

对应CSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
  display:none;
  position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
  content:"挑选";
  position:absolute;
  right 11px;
}

方式3：应用document.querySelector() 页面编码

<el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection">
    </el-table-column>
    <el-table-column
      label="时间"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="详细地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

对应js

mounted(){
  this.$nextTick(()=>{
    this.init();
  })
},
methods: {
  init(){
  document.querySelector(".el-checkbox__inner").style.display="none";
  document.querySelector(".cell").innerHTML = '挑选'      
      }
}

方式4：不应用selection挑选列，重新写过列应用checkbox

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="挑选"
        width="50">
        <template slot-scope="scope">
          <el-checkbox></el-checkbox></template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="详细地址">
      </el-table-column>
    </el-table>

方式5：立即根据CSS款式改动

.el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
.el-table__header .el-table-column--selection .cell:before {
  content: "挑选";
}

总结

到此这篇有关element带挑选报表将表头的复选框改为文本的文章内容就详细介绍到这了,更多有关挑选报表将表头的复选框改为文本內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：在盆友圈火爆得不必不必的H5手机游戏 返回下一篇：没有了