Avue

表格行配置项

... 2021-7-29 About 8 min

# 表格行配置项

# 边框

默认情况下，是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

<avue-crud :data="data" :option="option" ></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          border:true,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Expand Copy

# 条纹

默认情况下，是不具有行彩色条纹的，如果需要，可以使用stripe属性，它接受一个Boolean，设置为true即可启用。

<avue-crud :data="data" :option="option1" ></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option1:{
          stripe:true,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Expand Copy

# 行和单元格样式

开放了cell-style和row-style方法

<avue-crud :data="data" :option="option" :cell-style="cellStyle" :row-style="rowStyle"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            money:3000
          }, {
            name:'李四',
            sex:false,
            money:4000
          }, {
            name:'王五',
            sex:false,
            money:2000
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            },{
              label:'工资',
              prop:'money'
            }
          ]
        }
      };
    },
    methods: {
      rowStyle({row,column,rowIndex}){
        if(rowIndex%2===0){
          return {
              backgroundColor:'#eee',
              color:'#fff'
          }
        }
      },
      cellStyle({row,column,rowIndex,columnIndex}){
        if(columnIndex==1){
          if(row.money<=3000){
            return {
              color:'green',
              fontWeight:'bold',
              fontSize:'20'
            }
          }else{
            return {
              color:'red',
              fontWeight:'bold',
              fontSize:'20'
            }
          }
        }
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
Expand Copy

# 自定义行样式

.warning-row{
  background-color: #F56C6C !important;
  color:#fff;
}
.success-row{
  background-color: #67C23A !important;
  color:#fff;
}
.warning-row.hover-row td,.success-row.hover-row td{
  background-color: initial !important;
}
1
2
3
4
5
6
7
8
9
10
11

可以通过指定 组件的 row-class-name 属性来为 crud 中的某一行添加 class，表明该行处于某种状态,返回当前行的row数据和行的序号index

<avue-crud :data="data" :option="option"  :row-class-name="tableRowClassName"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex === 0) {
          return 'warning-row';
        } else if (rowIndex === 1) {
          return 'success-row';
        }
        return '';
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Expand Copy

# 行多选

设selection属性为true即可；勾选的同时会回调selectionChange方法返回当前选中的数据,toggleRowSelection方法设置行勾选,toggleAllSelection方法设置全部勾选


<avue-crud ref="crud" :data="data" :option="option" @selection-change="selectionChange">
   <template slot="menuLeft" slot-scope="{size}">
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleAllSelection()">选中全部</el-button>
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleRowSelection(data[0])">选中第一行</el-button>
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleSelection([data[1]])">选中第二行</el-button>
    <el-button type="danger" icon="el-icon-delete" :size="size" @click="toggleSelection()">取消选择</el-button>
  </template>
</avue-crud>
<script>
export default {
    data() {
      return {
        data: [{
          id:1,
          name: '张三',
          sex: '男'
        },{
          id:2,
          name: '李四',
          sex: '女'
        }],
        option:{
          selection: true,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      selectionChange(list){
        this.$message.success('选中的数据'+ JSON.stringify(list));
      },
      toggleAllSelection(){
        this.$refs.crud.$refs.table.toggleAllSelection()
      },
      toggleSelection(data){
        //传递数组进去，会勾选数组中的对象，如果已经勾选则会取消勾选
        this.$refs.crud.toggleSelection(data);
      },
      toggleRowSelection(row){
        //第一个参数为数据，第二个参数为是否勾选
        this.$refs.crud.toggleRowSelection(row,true);
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Expand Copy

# 禁止某个项选择

selectable函数决定该行是否可以勾选


<avue-crud ref="crud" :data="data" :option="option" @selection-change="selectionChange" ></avue-crud>
<script>
export default {
    data() {
      return {
        data: [{
          id:1,
          name: '张三',
          sex: '男'
        },{
          id:2,
          name: '李四',
          sex: '女'
        }],
        option:{
          selection: true,
          selectable:(row,index)=>{
            return index===1;
          },
          tip:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      selectionChange(list){
        this.$message.success('选中的数据'+ JSON.stringify(list));
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Expand Copy

# 翻页多选

设置reserveSelection为true保留之前的勾选


<avue-crud  :page.sync="page" :data="data" :option="option" @selection-change="selectionChange" @on-load="onLoad">
</avue-crud>
<script>
export default {
    data() {
      return {
         page: {
          pageSize: 2,
          pageSizes:[2]
        },
        data: [],
        option:{
          selection: true,
          reserveSelection:true,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      onLoad(page) {
        this.page.total = 4
        //模拟分页
        if (this.page.currentPage === 1) {
          this.data = [
            {
              id:1,
              name: '张三',
              sex: '男'
            },{
              id:2,
              name: '李四',
              sex: '女'
            }
          ]
        } else if (this.page.currentPage == 2) {
          this.data = [
            {
              id:3,
              name: '王五',
              sex: '女'
            },{
              id:4,
              name: '赵六',
              sex: '女'
            }
          ]
        }
      },
      selectionChange(list){
        this.$message.success('选中的数据'+ JSON.stringify(list));
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
Expand Copy

# 多选提示

设置tip为false可以取消表格上方显示的提示，同时支持对应的卡槽自定义


<avue-crud ref="crud" :data="data" :option="option" @selection-change="selectionChange">
   <template slot="tip">
    <el-tag type="danger" size="mini">自定义内容</el-tag>
  </template>
</avue-crud>
<script>
export default {
    data() {
      return {
        data: [{
          id:1,
          name: '张三',
          sex: '男'
        },{
          id:2,
          name: '李四',
          sex: '女'
        }],
        option:{
          selection: true,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Expand Copy

# 行单选

单选一行数据时需要设置highlightCurrentRow属性为true,回调current-row-change方法,同时返回当前行的row数据,

<avue-crud ref="crud" :data="data" :option="option0" @current-row-change="handleCurrentRowChange"></avue-crud>
<div style="margin-top: 20px">
    <el-button @click="setCurrent(data[1])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
</div>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option0:{
          highlightCurrentRow:true,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    },
    methods: {
        setCurrent(row) {
          this.$refs.crud.setCurrentRow(row);
        },
        handleCurrentRowChange(val){
          this.$notify({
            showClose: true,
            message: '单选'+JSON.stringify(val),
            type: 'success',
          });
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Expand Copy

# 行单选(利用卡槽)

这里利用了列自定义卡槽方式去实现行单选


<avue-crud ref="crud" :data="data" :option="option" @row-click="rowClick">
  <template slot="radio"
              slot-scope="{row}">
      <el-radio v-model="selectRow"
                :label="row.$index">-</el-radio>
    </template>
</avue-crud>
<script>
export default {
    data() {
      return {
        selectRow: '',
        data: [{
          id:1,
          name: '张三',
          sex: '男'
        },{
          id:2,
          name: '李四',
          sex: '女'
        }],
        option:{
          align:'center',
          menuAlign:'center',
          column:[{
              label: '',
              prop: 'radio',
              width: 60,
              hide: false
            },
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods:{
      rowClick (row) {
        this.selectRow = row.$index
        this.$message.success('选择序号'+row.$index)
      },
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Expand Copy

# 展开行

Tips

1.0.8+

使用expand属性时必须配置rowKey属性为你行数据的主键，不能重复, defaultExpandAll属性默认展开全部,expandRowKeys为展开指定rowKey主键的数组，同时你也可以调用toggleRowExpansion方法传入你要展开的row

<avue-crud ref="crud" :option="option" :data="data" @expand-change="expandChange">
  <template slot="expand" slot-scope="{row}">
    {{row}}
  </template>
</avue-crud>
<script>
export default {
 data() {
    return {
      option: {
        expand: true,
        expandRowKeys:[1],
        rowKey:'id',
        column: [{
          label: '姓名',
          prop: 'name'
        }, {
          label: '年龄',
          prop: 'sex'
        }]
      },
      data: [{
        id: 1,
        name: '张三',
        sex: 12,
      }, {
        id: 2,
        name: '李四',
        sex: 20,
      }]
    }
  }, methods: {
    expandChange(row, expendList) {
      this.$message.success('展开回调')
    },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Expand Copy

# 展开行(手风琴模式)

expand-change配置expandRowKeys去使用

<avue-crud ref="crud" :option="option1" :data="data" @expand-change="expandChanges">
  <template slot="expand" slot-scope="{row}">
    {{row}}
  </template>
</avue-crud>
<script>
export default {
 data() {
    return {
      option1:{
        expand: true,
        expandRowKeys:[],
        rowKey:'id',
        column: [{
          label: '姓名',
          prop: 'name'
        }, {
          label: '年龄',
          prop: 'sex'
        }]
      },
      data: [{
        id: 1,
        name: '张三',
        sex: 12,
      }, {
        id: 2,
        name: '李四',
        sex: 20,
      }]
    }
  }, 
  methods: {
   expandChanges(row, expendList) {
      if (expendList.length) {
        this.option1.expandRowKeys = []
        if (row) {
          this.option1.expandRowKeys.push(row.id)
        }
      } else {
        this.option1.expandRowKeys = []
      }
      this.$message.success('展开回调')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
Expand Copy

# 行单击方法

单击一行数据时回调row-click方法,同时返回当前行的row数据,event当前的操作对象,column当前列的属性

<avue-crud :data="data" :option="option" @row-click="handleRowClick"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      };
    },
    methods: {
        handleRowClick (row, event, column) {
          this.$notify({
            showClose: true,
            message: '单击'+JSON.stringify(row),
            type: 'success',
          });
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Expand Copy

# 行双击方法

双击一行数据时回调row-dblclick方法,同时返回当前行的row数据,event当前的操作对象,column当前列的属性

<avue-crud :data="data" :option="option" @row-dblclick="handleRowDBLClick"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    },
    methods: {
       handleRowDBLClick (row, event) {
        this.$notify({
          showClose: true,
          message: '双击'+JSON.stringify(row),
          type: 'success',
        });
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Expand Copy

# 行拖拽排序

Tips

2.9.0+

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/Sortable/1.10.0-rc2/Sortable.min.js"></script>
1
2

rowSort设置为true即可开启拖拽功能，sortable-change为拖拽后的回调方法

<avue-crud :option="option" :data="data" @sortable-change="sortableChange"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       },{
          text1:'内容3-1',
          text2:'内容3-2'
       },{
          text1:'内容4-1',
          text2:'内容4-2'
       },{
          text1:'内容5-1',
          text2:'内容5-2'
       }],
       option:{
          rowSort:true,
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  },
  methods:{
     sortableChange(oldindex, newindex) {
        this.$message.success(oldindex+','+newindex)
        console.log(oldindex, newindex)
        
      }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Expand Copy

# 行合并

Tips

如果数据不确定参考动态数据行和列合并

通过给传入spanMethod方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

<avue-crud
  :data="data"
  :option="option"
  :span-method="spanMethod"
></avue-crud>

<script>
  export default {
    data() {
      return {
        data: [
          {
            id: '12987122',
            name: '王小虎',
            amount1: '234',
            amount2: '3.2',
            amount3: 10
          },
          {
            id: '12987123',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12
          },
          {
            id: '12987124',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9
          },
          {
            id: '12987125',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17
          },
          {
            id: '12987126',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
        ],
        option: {
          border: true,
          menu:false,
          column: [
            {
              label: 'ID',
              prop: 'id'
            },
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '数值 1',
              prop: 'amount1'
            },
            {
              label: '数值 2',
              prop: 'amount2'
            },
            {
              label: '数值 3',
              prop: 'amount3'
            }
          ]
        }
      }
    },
    methods: {
      spanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2]
          } else if (columnIndex === 1) {
            return [0, 0]
          }
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
Expand Copy
Last update: August 14, 2024 15:38
Contributors: smallwei

表格列配置项

您正在浏览基于 Vue 2.x 的 Avue 文档; 点击这里 查看 Vue 3.x 的升级版本