La cabecera de elemento de formulario en el cuadro de texto
Método a utilizar los atributos de la tabla: celdas de encabezado de clase-nombre
código de interfaz de forma
//表格
<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>
Los js correspondientes
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'
}
}
}
El CSS correspondientes
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
display:none;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"选择";
position:absolute;
right 11px;
}
/ Profundamente / función: si utiliza otra persona es componentes propios o desarrollar un componente, a veces se modifique uno puede afectar al otro lugar, en este momento o que no tiene otra gente de montaje, sí un re-envasados, pero muchas veces no es realista, por lo que es necesario utilizar / profundidad /, no afectará a los otros lugares, sino también para modificar subconjuntos en el estilo actual.
Segundo método, utilizando el encabezado de columna Tabla de Atributos: etiqueta de nombre-clase-
código de la interfaz
<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>
El CSS correspondientes
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
display:none;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"选择";
position:absolute;
right 11px;
}
Método tres: Uso document.querySelector ()
código de la interfaz
<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>
Los js correspondientes
mounted(){
this.$nextTick(()=>{
this.init();
})
},
methods: {
init(){
document.querySelector(".el-checkbox__inner").style.display="none";
document.querySelector(".cell").innerHTML = '选择'
}
}
Cuatro: no utilizar la selección para seleccionar columnas, la columna casilla uso de reescritura
<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>
Método cinco: directamente modificando los estilos CSS
.el-table__header .el-table-column--selection .cell .el-checkbox {
display:none
}
.el-table__header .el-table-column--selection .cell:before {
content: "选择";
}