<el-table-column fixed="left" type="selection" width="40px" :selectable="selecttableFunction"/> 1. 判断该多选框是否可以勾选 let selecttableFunction = (row, index) => { if (row.topStatus == 2) { return false //不可勾选 } else { return true //可勾选 } } 1. 2. 3. 4. 5....
1. 理解selectable属性 selectable属性是el-table-column组件的一个属性,当type属性设置为selection时,selectable属性可以控制该行多选框的禁用状态。如果selectable回调函数返回false,则该行的多选框将被禁用。 2. 实现禁用多选框的逻辑 你需要根据特定的逻辑(例如,某行数据的某个字段值)来决定是否禁用多选框。这通常在...
01.gif 从图中可看出,已支持父子节点联动,最后勾选的行数据保存在multipleDevCreateList。 代码 <el-tableref="multipleDevCreateRef"v-model:selected-row-keys="multipleDevCreateList":data="tableData"style="width:100%"row-key="Path"default-expand-all@select="select"@select-all="selectAll"@selection-...
<pl-table-column type="selection" width="55" :selectable="selectable" /> <pl-table-column type="index" width="100" fixed /> <!--show-overflow-tooltip属性代表超出则内容部分给出提示框--> <pl-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-over...
</el-table> </template> <script> export default { data() { return { data: [ { name: "Node 1", children: [ { name: "Node 1.1", children: [], }, { name: "Node 1.2", children: [], }, ], }, { name: "Node 2", ...
span-method="props.spanMethod || spanMethod" > <el-table-column width="55" v-if="selection" :selectable="(row) => setDisabled(row, isSelectChange)" type="selection" align="center" /> <template v-for="item in column" :key="item.prop"> <el-table-column v-if="!item.auth || ...
当el-table 元素中注入 data 对象数组后,在 el-table-column 中用prop 属性来对应对象中的键名即可填入数据,用 label 属性来定义表格的列名。 可以使用 width 属性来定义列宽。Date Name Address 2016-05-03 Tom No. 189, Grove St, Los Angeles 2016-05-02 Tom No. 189, Grove St, Los Angeles 2016-...
//是否显示边框 selectable: () => { //是否可以选中 return false; }, }, }, // table 表格的控制参数 total: { type: Number, default: 0, }, // 总数 list: { type: Array, default: [], // prop:表头绑定的地段,label:表头名称,align:每列数据展示形式(left, center, right),width:列宽...
此外,table组件还提供了selectable属性,它是一个函数,用于定义哪些行可以被选中。通过这个函数,你可以根据行的数据来决定行是否可以被选中,从而为用户提供更加定制化的选择体验。 这些功能大大增强了element-plus的table组件的灵活性和可用性,使得它能够适应各种复杂的业务需求。©...
5、table表格可多选状态下,禁止部分行选中(selectable) <el-table :data="sliceTableData" v-loading="loading" > <el-table-column type="selection" width="55" :selectable="isSelectTable"/> </el-table> function isSelectTable(row: any, index: number) { return row.auditStatus === '条件判断'...